Vue 动态页面标题

 

页面

const routes = [
  {
    path: '/user',
    name: 'user',
    meta: {
      title: '个人中心',
      auth: true
    },
    component: () => import(/* webpackChunkName: "user" */ '../pages/user/user.vue')
  }]

 

可以添加个变量 加上 标题名 前缀

let titletou = "卢本伟 - "

 

路由守卫：

router.beforeEach((to, from, next) => {
  // 动态标题
  if (to.meta.title) {
    document.title = titletou + to.meta.title;
  } else {
    document.title = titletou + "Hello";
  }
})

 

最后标题效果 ：

卢本伟 - Hello