一般来说vue单页面应用的title在index.html中设置,但是一旦设置就是唯一了,对此有了以下需求:
需要实现不同的页面对应不同的title,
特别是微信公众号时,有了自带的头部栏,在vue2.0中可以使用vue-wechat-title解决问题
1,安装vue-wechat-title
npm install vue-wechat-title --save
2,路由配置里加title,添加meta字段设置title
{
path: '/user',
component: User,
name: 'User',
meta:{
title:'个人中心'
}
},
3,在main.js中添加下面代码
import VueWechatTitle from 'vue-wechat-title';
Vue.use(VueWechatTitle);
router.beforeEach((to, from, next) => {
if(to.meta.title){
window.document.title = to.meta.title
} else {
next()
}
})
4,在app.vue中修改代码
<template>
<div id="app">
<router-view v-wechat-title="$route.meta.title"/>
</div>
</template>
5,遇到传递参数的情况时,可以在页面中这样设置
在总的div里面设置title
<template>
<div class="container" v-wechat-title="this.b_title">
</div>
</template>
在created钩子中
created() {
this.b_title = this.$route.query.orderName;
},
这样就达到效果了