1. 程式人生 > >在單頁應用Vue中設定標題(title)

在單頁應用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的設定