Vue下动态修改title标题

安装 vue-wechat-title 插件，

1. npm install vue-wechat-title --save

在main.js 中，

1. Vue.use(require('vue-wechat-title'))

路由定义(只截取一部分)：

1. // ...
2. const routes = [
3.   {
4.     name: 'Home',
5.     path: '/home',
6.     meta: {
7.       title: '首页'
8.     },
9.     component: require('../views/Home.vue')
10.   },
11.   {
12.     name: 'Order',
13.     path: '/order',
14.     meta: {
15.       title: '订单'
16.     },
17.     component: require('../views/Order.vue')
18.   },
19.   {
20.     name: 'UCenter',
21.     path: '/ucenter',
22.     meta: {
23.       title: '用户中心'
24.     },
25.     component: require('../views/UCenter.vue')
26.   }
27. ]
28. // ...

App.vue **建议全局只使用一次该指令 标题可用vuex或者router中定义 不要多处使用!!**

1. <!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
2. <div v-wechat-title="$route.meta.title"></div>
3. <!--or-->
4. <router-view v-wechat-title="$route.meta.title"></router-view>

自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的

1. <div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>

动态修改在组件中，设置：

1. this.$route.meta.title = '标题名称'

项目：https://github.com/deboyblog/vue-wechat-title