vue修改每个页面的title

首先需要观察我们的路由

进入router下的index.js

 {
    path: '/',
    component: layout,
    icon:'el-icon-setting',
    name: '权限管理',
    children: [{
      path: '/pagerole',
      name: '页面权限',
      icon:'el-icon-setting',
      component: () => import('@/views/roletype/page'),
      children: []
    }, {
      path: '/btnrole',
      name: '按钮权限',
      icon:'el-icon-eleme',
      component: () => import('@/views/roletype/btn'),
      children: []
    }

比如上面的代码，就是需要把nane取出来

全局路由钩子设置

全局钩子 router.beforeEach((to, from, next)
我们打印一下to，得到我们想要的东西
然后使用如下代码

router.beforeEach((to, from, next) => {
  if (to.name) {
    document.title = to.name
  }
 next()
}

根据自己设置的路由取to后面的title的值就ok了

效果