在单页应用Vue中设置标题（title）

安装

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