安裝

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

總結

以上是生活随笔為你收集整理的在单页应用Vue中设置标题（title）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。