欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue踩坑填坑(四):在vue单页中修改title

程序员文章站 2022-07-14 08:07:46
...

由于在vue单页应用中title只设定在入口文件index.html,如果切换路由,title怎么更换?

在路由router中设置meta:

{
      path:'/chooseBrand',
      component: resolve => require(['../components/page/ChooseBrand.vue'], resolve),
      meta: {
        title: 'title标题'
      }
},

后面加上:

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

这样的话在切换路由时就会更换你在meta中设置的title。