vue設置路由title,但刷新頁面時title失效的解決
更新時間：2022年06月22日 14:22:14 作者：Jacy_Lee_LDF
這篇文章主要介紹了vue設置路由title，但刷新頁面時title失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
1. 在router/index.js中
使用meta屬性的title設置好每個路由對應的title值
/* router/index.js: */
?
routes: [
? ? {
? ? ? path: '/',
? ? ? component: () => import('../login'),
? ? ? name: 'login',
? ? ? meta: {
? ? ? ? title: '用戶登錄'
? ? ? }
? ? },
? ? //.............
]2.在main.js中設置路由守衛(wèi)
vue頁面切換時，網(wǎng)頁title隨之切換
/* main.js: */
?
/*路由守衛(wèi)*/
router.beforeEach((to, from, next) => {
? /* 路由發(fā)生變化修改頁面title */
? if (to.meta.title) {
? ? document.title = to.meta.title
? }
? next()
})按照常規(guī)步驟設置好路由的title，vue頁面切換時，也確實實現(xiàn)了title的變化，但是我發(fā)現(xiàn)刷新頁面之后title失效了?。。?！
百度之后，發(fā)現(xiàn)很多人用 ‘ vue-wechat-title ’ 插件來設置title，嘗試了一下，確實解決了我的問題
具體操作如下
同上在 router/index.js 中
使用meta屬性的title設置好每個路由對應的title值
在項目的根目錄下
打開命令行，通過npm install vue-wechat-title --save來安裝該插件：（有一些編輯器自帶Terminal命令行操作臺，比如我用的WebStorm，可根據(jù)個人情況操作。）
在main.js中引入并且使用該插件
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
修改App.vue的路由標簽
在 router-view 標簽上添加 v-wechat-title='$route.meta.title' ：
<template> ? <div id="app"> ? ? <router-view v-wechat-title='$route.meta.title'/> ? </div> </template>
自此，問題解決，以此給自己做個記錄。
不知道別的小伙伴有沒有遇到像我一樣的問題，刷新頁面之后title失效了，我百度了一下好像沒有相關詞條，如果有小伙伴遇到了跟我一樣的問題，希望也能幫助到你。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了 Vue 登錄功能實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關于vue.js中Vue-router 2.0基礎實踐的相關資料，其中包括vue-router 2.0的基礎用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關知識，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟
這篇文章主要介紹了vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷表格（element-ui），文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
組件是vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,這篇文章主要給大家介紹了關于Vue3的10種組件通信方式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了前端token中4個存儲位置的優(yōu)缺點說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
你不知道的Vue技巧之--開發(fā)一個可以通過方法調用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個可以通過方法調用的組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
使用vue引入maptalks地圖及聚合效果的實現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項目中axios請求網(wǎng)絡接口封裝的示例代碼
這篇文章主要介紹了vue項目中axios請求網(wǎng)絡接口封裝的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue-codemirror是一個基于Vue的代碼在線編輯器組件,它封裝了CodeMirror編輯器,使得在Vue項目中可以方便地使用CodeMirror,下面我們就來看看vue-codemirror的具體使用吧2024-02-02