vuejs怎么設(shè)置title

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

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

vuejs怎么設(shè)置title？

vue單頁(yè)面標(biāo)題設(shè)置 title

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

推薦使用 vue-wechat-title

vue-wechat-title作用

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

已測(cè)試APP
微信
QQ
支付寶
淘寶

安裝

npm install vue-wechat-title --save

用法

1，在 main.js 中引入

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

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

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

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

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

自定義加載的圖片地址 默認(rèn)是 ./favicon.ico 可以是相對(duì)或者絕對(duì)的

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

ok ！重啟看看

推薦學(xué)習(xí)：《vue教程》