在单页应用Vue中设置标题(title)
安装npm install vue-wechat-title --savemain.js引入Vue.use(require('vue-wechat-title'))路由定义{path: '/topay',name: 'ToPay',component: ToPay,meta: {...
·
安装
npm install vue-wechat-title --save
main.js引入
Vue.use(require('vue-wechat-title'))
路由定义
{
path: '/topay',
name: 'ToPay',
component: ToPay,
meta: {
title:'结算'
}
},
{
path: '/orderinfo',
name: 'OrderInfo',
component: OrderInfo,
meta: {
title:'订单详情'
}
}
模板中使用
#在任意的位置中使用以下指令v-wechat-title
<div v-wechat-title="$route.meta.title" class='menu-container'>
上面这种情况是写死title的,另外我们也可以通过三元运算符之类的动态设置title
<div v-wechat-title="storeinfo[0] ? storeinfo[0]['name'] : ''" class="menu-container">
如果不用插件,也可以使用其它的方法
1.例如在每个组件的mouted或created里使用document.title = ‘订单详情’进行设置
2.在main.js的mouted或created里,使用vue-router的beforeEach进行document.title的设置
参考:https://www.npmjs.com/package/vue-wechat-title
更多推荐
已为社区贡献11条内容
所有评论(0)