两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐)
首先在路由文件index.js中给每个单页面路由添加title
routes: [{ path: '/', name: 'index', component: index, meta:{ title:'首页标题' } },{ path:'/detail', name:'detail', component:detail, meta:{ title:'详情页标题' } }]第一种方法:引入vue-wechat-title插件
1.下载安装插件依赖
npm install vue-wechat-title --save-dev
2.在入口文件main.js中引入并使用
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
3.在app.vue中修改<router-view>标签
<router-view v-wechat-title='$route.meta.title'></router-view>
第二种方法:编程方式实现
直接在入口文件main.js中添加如下代码即可
router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next() })完啦,噜啦啦.......