Vue项目不同页面显示不同的title

背景

Vue项目中只有一个index.html，在index.html中设置的title会作为整个项目的页面title。如何在每个页面中设置特定title？

实现

通过路由meta统一管理

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'const routes = [{path: '/',component: Home,meta: { title: '首页' }},{path: '/about',component: About,meta: { title: '关于我们' }}
]const router = createRouter({history: createWebHistory(),routes
})// 监听路由切换，设置 document.title
router.afterEach((to) => {if (to.meta.title) {document.title = to.meta.title as string}
})export default router