【Vue3+TS】添加路由元信息，动态化标签页标题

步骤

1.在vue3中的路由表字段中，添加meta对象

 {
          path: '/home',
          component: () => import('@/views/Home/index.vue'),
          meta: {
            title: '主页'
          }
},

2.设置全局后置路由守卫

//全局后置导航
router.afterEach((to) => {
  document.title = (`${to.meta.title}-` || '') + '问诊APP'
})

这时你会发现to.meta.title并不会有代码提示，所以我们还需要针对TypeScript做出类型声明

在@/types中新建router.d.ts

//扩展路由元信息定义
import 'vue-router'
declare module 'vue-router' {
  interface RouteMeta {
    title?: string
  }
}

至此，路由元信息以及动态标签页标题功能完成