vuejs設(shè)置title的方法：1、通過npm install安裝“vue-wechat-title”；2、在main.js中引入“vue-wechat-title”；3、在index.js中給每個路由添加title即可。

本文操作環(huán)境：windows7系統(tǒng)、Vue2.9.6版、Dell G3電腦。

vuejs怎么設(shè)置title？

vue單頁面標題設(shè)置 title

前端框架如 Vue、React 等都是單頁面的應用，整個web站點其實是一個index頁面，頁面跳轉(zhuǎn)都是替換index.html里邊的內(nèi)容。這與傳統(tǒng)的每個頁面設(shè)置title標簽的做法不一樣。

推薦使用 vue-wechat-title

vue-wechat-title作用

Vuejs 單頁應用在iOS系統(tǒng)下部分APP的webview中 標題不能通過 document.title = xxx 的方式修改 該插件只為解決該問題而生(兼容安卓)

已測試APP
微信
QQ
支付寶
淘寶

安裝

npm install vue-wechat-title --save

用法

1，在 main.js 中引入

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

2，在路由文件 index.js 中給每個路由添加 title

// 掛載路由const router =  new Router({    mode: 'history',    routes:[         {           path: '/',           name: 'Index',           component: Index,           meta: {             title: '首頁'   // 標題設(shè)置           }         },         {           path: '/lists',           name: 'Lists',           component: Lists,           meta: {             title: '列表'  // 標題設(shè)置           }         }      ] });

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

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

自定義加載的圖片地址 默認是 ./favicon.ico 可以是相對或者絕對的

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

ok ！重啟看看

推薦學習：《vue教程》