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失效了！?。。?/p>
百度之后，發(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-cli webpack 開發(fā)環(huán)境跨域詳解
本篇文章主要介紹了vue-cli webpack 開發(fā)環(huán)境跨域詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標滑動展示tab欄切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了VueCli4項目配置反向代理proxy的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了Vue中使用echarts的方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue?按需引入vant跟全局引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue項目配置同一局域網(wǎng)可使用ip訪問的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
本篇文章主要介紹了詳解Vue應用部署到服務器的正確方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-07-07
這篇文章主要介紹了如何使用ant-design-vue的Table組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
我們知道每一個vue項目應用都是通過vue的構造函數(shù)進行創(chuàng)建一個新的vue項目的。創(chuàng)建vue實例的配置對象，可以包括一下屬性選項，比如：data、methods、watch、template等等，每一個選項都有不同的功能，大家可以根據(jù)自己的需求選擇不同的配置2022-08-08
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04