实现：切换页面切换标题，扩展 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
}
}
