Vue3 动态修改页面的title

在路由的 index.js 文件内添加如下代码：

注意！以下代码必须写在 const router 和 export default router 之间，否则会报错。

router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title
  next()
})

完整版：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title
  next()
})

export default router

之后，再去设置每个子路由页的标题即可，在每个子路由对象中添加 meta 属性：

      {
        path: '/main',
        name: 'main',
        component: Main,
        meta: { title: '首页' }
      }

效果图如下：