vue-router 动态的改变title的值

最近在开发手机端项目的时候,需要对页面的titel进行动态的配置。主要是采用路由守卫的方法进行动态的改变,具体方法如下:

1.meta 数据配置

将每个页面的 title 都写router中的 meta 中来统一维护。

// router.js文件
 {
      path: '/waybillHistory',
      name: 'waybillHistory',
      meta: {
        title: '历史记录'
      },
      component: () => import('./views/waybill/waybillHistory/waybillHistory')
    }

2.全局守卫动态改变

// router.js文件
// 全局路由守卫,动态改变tille
router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title || '默认'
  next()
})

3.如果需要在页面中获取title参数,可以通过一下进行


你可能感兴趣的:(vue-router 动态的改变title的值)