vue 动态修改页面标题

836 阅读1分钟

通过使用路由守卫 + meta 属性 实现动态修改页面标题 + document.title = '标题'

routes:[
  {
    path: '/login',
    name: 'login',
    component: LoginView,
    meta: { title: '登录' }
  },
    {// 专辑详情页
        path: 'albumdetail',
        name: 'albumdetail',
        component: () => import('@/views/Album/index.vue'),
        meta: { title: '专辑' }
    }
  ]

router.afterEach((to) => {
  if (to.meta.title) {
    document.title = to.meta.title as string
  } else {
    document.title = '网易云音乐'
  }
})