- 在路由配置中设置需要实现切换网页标题路由的meta字段，以存储页面标题。
路由代码示例:
{ path: "/", component: Home, meta: { title: "Home" } }, { path: "/about", component: About, meta: { title: "About" } }
2.在前置路由守卫中设置访问将要跳转到的路由对象，并从其meta字段中获取页面标题 这是最关键的一步
代码示例:
router.beforeEach((to, from, next) => { document.title = to.meta.title; next(); });
3.可能遇到的问题: 在一个新开或者二开的项目中, 可能没有下载vue-meta的包, 所以在这之前先下包
npm install vue-meta --save
下载之后一般不用手动去配置, 只有很老的项目才需要
可以去检查有没有这个配置项
resolve: { alias: { 'vue-meta$': 'vue-meta/dist/vue-meta.esm.js' } }
4.如果使用的是Vue CLI 3或更新版本，则无需手动配置Webpack。只需要在Vue组件中导入"vue-meta"并在Vue实例中使用它即可。
// 在组件中导入vue-meta import VueMeta from 'vue-meta' export default { name: 'MyComponent', metaInfo: { title: 'My Page Title' }, // 在Vue实例中使用vue-meta created () { this.$meta().refresh() } }
