vue 动态修改页面标题title
vue 动态修改页面标题title1.安装npm install vue-wechat-title --save或npm install vue-wechat-title -S2.使用在main.js中引用插件import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)3.在路由router文件 in...
·
vue 动态修改页面标题title
1.安装
npm install vue-wechat-title --save
或
npm install vue-wechat-title -S
2.使用
在main.js中引用插件
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
3.在路由router文件 index.js 中给每个路由添加 title
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
title: ' 首页' // 标题设置
}
},
{
path: '/about',
name: 'about',
component: About,
meta: {
title: ' |关于' // 标题设置
}
},
{
path: '/case',
name: 'case',
component: Case,
meta: {
title: ' 案例' // 标题设置
}
},
{
path: '/contact',
name: 'contact',
component: Contact,
meta: {
title: '联系我们' // 标题设置
}
},
{
path: '/join',
name: 'join',
component: Join,
meta: {
title: ' 加入我们' // 标题设置
}
},
{
path: '/services',
name: 'services',
component: Services,
meta: {
title: ' 服务介绍' // 标题设置
}
},
]
})
4,最后一步,在 app.vue 中修改 router-view 组件
//将app.vue 中
<router-view/>
// 改为
<router-view v-wechat-title='$route.meta.title'></router-view>
重启刷新页面就ok了
更多推荐
已为社区贡献8条内容
所有评论(0)