/* router/index.js: */
?
routes: [
? ? {
? ? ? path: '/',
? ? ? component: () => import('../login'),
? ? ? name: 'login',
? ? ? meta: {
? ? ? ? title: '用戶登錄'
? ? ? }
? ? },
? ? //.............
]

2.在main.js中設(shè)置路由守衛(wèi)

vue頁(yè)面切換時(shí)，網(wǎng)頁(yè)title隨之切換

/* main.js: */
?
/*路由守衛(wèi)*/
router.beforeEach((to, from, next) => {
? /* 路由發(fā)生變化修改頁(yè)面title */
? if (to.meta.title) {
? ? document.title = to.meta.title
? }
? next()
})

按照常規(guī)步驟設(shè)置好路由的title，vue頁(yè)面切換時(shí)，也確實(shí)實(shí)現(xiàn)了title的變化，但是我發(fā)現(xiàn)刷新頁(yè)面之后title失效了?。。?！

百度之后，發(fā)現(xiàn)很多人用 ‘ vue-wechat-title ’ 插件來(lái)設(shè)置title，嘗試了一下，確實(shí)解決了我的問(wèn)題

具體操作如下

同上在 router/index.js 中

使用meta屬性的title設(shè)置好每個(gè)路由對(duì)應(yīng)的title值

在項(xiàng)目的根目錄下

打開(kāi)命令行，通過(guò)npm install vue-wechat-title --save來(lái)安裝該插件：（有一些編輯器自帶Terminal命令行操作臺(tái)，比如我用的WebStorm，可根據(jù)個(gè)人情況操作。）

在main.js中引入并且使用該插件

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

修改App.vue的路由標(biāo)簽

在 router-view 標(biāo)簽上添加 v-wechat-title='$route.meta.title' ：

<template>
? <div id="app">
? ? <router-view v-wechat-title='$route.meta.title'/>
? </div>
</template>

自此，問(wèn)題解決，以此給自己做個(gè)記錄。

不知道別的小伙伴有沒(méi)有遇到像我一樣的問(wèn)題，刷新頁(yè)面之后title失效了，我百度了一下好像沒(méi)有相關(guān)詞條，如果有小伙伴遇到了跟我一樣的問(wèn)題，希望也能幫助到你。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue登錄功能實(shí)現(xiàn)
本文主要介紹了 Vue 登錄功能實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐教程
這篇文章主要給大家介紹了關(guān)于vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐的相關(guān)資料，其中包括vue-router 2.0的基礎(chǔ)用法、動(dòng)態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識(shí)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-05-05
vue.js 2.*項(xiàng)目環(huán)境搭建、運(yùn)行、打包發(fā)布的詳細(xì)步驟
這篇文章主要介紹了vue.js 2.*項(xiàng)目環(huán)境搭建、運(yùn)行、打包發(fā)布的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
vue實(shí)現(xiàn)日歷表格（element-ui）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷表格（element-ui），文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
Vue3的10種組件通信方式總結(jié)
組件是vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用,這篇文章主要給大家介紹了關(guān)于Vue3的10種組件通信方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
前端token中4個(gè)存儲(chǔ)位置的優(yōu)缺點(diǎn)說(shuō)明
這篇文章主要介紹了前端token中4個(gè)存儲(chǔ)位置的優(yōu)缺點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue項(xiàng)目中axios請(qǐng)求網(wǎng)絡(luò)接口封裝的示例代碼
這篇文章主要介紹了vue項(xiàng)目中axios請(qǐng)求網(wǎng)絡(luò)接口封裝的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
vue2導(dǎo)入使用vue-codemirror組件的教程詳解
vue-codemirror是一個(gè)基于Vue的代碼在線編輯器組件,它封裝了CodeMirror編輯器,使得在Vue項(xiàng)目中可以方便地使用CodeMirror,下面我們就來(lái)看看vue-codemirror的具體使用吧
2024-02-02