Vue项目中路由跳转时如何更改title的值

发布时间:2022年04月01日评论数：抢沙发阅读数： 2538

	不同页面有不同的title，那么如何动态改变title的值呢？

	涉及到两个页面的修改，src/main.js文件和src/router/index.js文件

	1.在main.js文件中注册一个全局的前置守卫：

router.beforeEach(function (to, from, next) {
  if (to.meta.title) {
    document.title = to.meta.title
    //确保要调用，否则不跳转
    //next()
  } else {
      //如果没有，也可以用个默认的
      document.title = "默认名称"  
  }
  next()
})

	router.beforeEach参数:

	to：要跳转的目标路由对象

	from：当前要离开的路由对象

	next：是个函数，确保要调用，否则不会跳转

	2.在index.js文件中增加meta属性

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    //下面是要增加的
    meta: {
      title: '首页'
    }
  },
  {
    path: '/ClassifyView',
    name: 'ClassifyView',
    component: () => import( '../views/ClassifyView.vue'),
    //下面是要增加的
    meta: {
      title: '商品分类'
    }
  }
]