实现：切换页面切换标题，扩展 vue-router 的类型

布局容器-页面标题

网址：https://router.vuejs.org/zh/guide/advanced/meta

给每一个路由添加 元信息 数据
router/index.ts

const router = createRouter({
   
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
    path: '/login', component: () => import('@/views/Login/index.vue'), meta: {
    title: '登录' } },
    {
   
      path: '/',
      component: () => import('@/views/Layout/index.vue'),
      redirect: '/home',
      children: [
        {
   
          path: '/home',
          component: () => import('@/views/Home/index.vue'),
          meta: {
    title: '首页' }
        },
        {
   
          path: '/notify',
          component: () => import('@/views/Notify/index.vue'),
          meta: {
    title: '消息通知' }
        },
        {
   
          path: '/user',
          component: () => import('@/views/User/index.vue'),
          meta: {
    title: '个人中心' }
        }
      ]
    }
  ]
})
//后置导航
//切换路由设置标题
router.afterEach((to) => {
   
  document.title = `${
     to.meta.title || ''}-优医问诊`
})

扩展元信息类型 types/vue-router.d.ts

import 'vue-router'
declare module 'vue-router' {
   
  // 扩展 元信息类型
  interface RouteMeta {
   
    // 标题
    title?: string
  }
}