vue-router自动更新标题¶

将路由的name作为标题¶

// 在route中配置name属性
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: LoginView
    }
  ]
})

// 每次访问新页面时，配置下document.title
router.beforeEach((to, from) => {
  document.title = to.name
})

也可以用meta.title，而非name¶

// 在route中配置meta.title属性
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: LoginView,
      meta: { title: '登录' }
    }
  ]
})

// 每次访问新页面时，配置下document.title
router.beforeEach((to, from) => {
  document.title = to.meta.title
})

默认标题¶

如果没有设置name或者meta.title，|| '默认标题'就会生效。

router.beforeEach((to, from) => {
  document.title = to.name || '默认标题'
})

router.beforeEach((to, from) => {
  document.title = to.meta.title || '默认标题'
})

本文为kyleblog.cn原创，转载请注明出处：https://www.kyleblog.cn/posts/vue_router_title