前端框架如Vue、React等都是單頁(yè)面的應(yīng)用，也就是說(shuō)整個(gè)web站點(diǎn)其實(shí)都是一個(gè)index頁(yè)面，所謂的頁(yè)面跳轉(zhuǎn)都是替換index.html里邊的內(nèi)容，而頁(yè)面的title是在每個(gè)頁(yè)面初始化的時(shí)候才設(shè)置一次。對(duì)于現(xiàn)在的前端框架，傳統(tǒng)的每個(gè)頁(yè)面設(shè)置title標(biāo)簽的做法是不行的。

推薦使用vue-wechat-title插件

下載安裝插件依賴

npm install vue-wechat-title --save

在main.js中引入插件

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

在路由文件 index.js中給每個(gè)路由添加title

 routes: [{
 path: '/',
 name: 'index',
 component: index,
 meta:{
 title:'首頁(yè)' // 標(biāo)題設(shè)置在這里
 }
 },{
 path:'/detail',
 name:'detail',
 component:detail,
 meta:{
 title:'詳情頁(yè)' // 標(biāo)題設(shè)置在這里
 }
 }]

在app.vue中修改router-view組件

<router-view v-wechat-title='$route.meta.title'></router-view>

重啟試試，可以了