两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐)
首先在路由文件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()
})
完啦,噜啦啦.......
这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
扫二维码加为好友就完事了!安排~