1.首先安装 vue-wechat-title包
npm install vue-wechat-title --save
2.引入包,设置每个页面的标题
在mian.js中引入 作为全局使用
import VueWechatTitle from "vue-wechat-title";
Vue.use(VueWechatTitle);
3 . 使用
在app.vue中的router-view中写入
<div id="app">
<router-view v-wechat-title="$route.meta.title" />
</div>
或者
<div v-wechat-title="$route.meta.title"></div>
4 .在路由文件 index.js 中给需要的路由添加 title
routes: [{
path: '/',
name: 'JmCon',
component: JmCon,
meta:{
keepAlive: true
}
}, {
path: '/detail',
name: 'TopicDetail',
component: TopicDetail,
meta:{
title: '首页',
keepAlive: false
}
}
]
5 .动态得改变title值
<div v-wechat-title="$route.meta.title={data.title}"></div>
动态的加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的
<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>
二: 加载固定的图标
第一种方法:
找到这两个文件:
2 .第二种
下面黄色是title前面默认的小图标,红色是默认的title