vue設(shè)置路由title,但刷新頁面時(shí)title失效的解決
1. 在router/index.js中
使用meta屬性的title設(shè)置好每個(gè)路由對(duì)應(yīng)的title值
/* router/index.js: */
?
routes: [
? ? {
? ? ? path: '/',
? ? ? component: () => import('../login'),
? ? ? name: 'login',
? ? ? meta: {
? ? ? ? title: '用戶登錄'
? ? ? }
? ? },
? ? //.............
]2.在main.js中設(shè)置路由守衛(wèi)
vue頁面切換時(shí)，網(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ī)步驟設(shè)置好路由的title，vue頁面切換時(shí)，也確實(shí)實(shí)現(xiàn)了title的變化，但是我發(fā)現(xiàn)刷新頁面之后title失效了?。。?！
百度之后，發(fā)現(xiàn)很多人用 ‘ vue-wechat-title ’ 插件來設(shè)置title，嘗試了一下，確實(shí)解決了我的問題
具體操作如下
同上在 router/index.js 中
使用meta屬性的title設(shè)置好每個(gè)路由對(duì)應(yīng)的title值
在項(xiàng)目的根目錄下
打開命令行，通過npm install vue-wechat-title --save來安裝該插件：（有一些編輯器自帶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>
自此，問題解決，以此給自己做個(gè)記錄。
不知道別的小伙伴有沒有遇到像我一樣的問題，刷新頁面之后title失效了，我百度了一下好像沒有相關(guān)詞條，如果有小伙伴遇到了跟我一樣的問題，希望也能幫助到你。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli webpack 開發(fā)環(huán)境跨域詳解
本篇文章主要介紹了vue-cli webpack 開發(fā)環(huán)境跨域詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VueCli4項(xiàng)目配置反向代理proxy的方法步驟
這篇文章主要介紹了VueCli4項(xiàng)目配置反向代理proxy的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了Vue中使用echarts的方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue?按需引入vant跟全局引入方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作
這篇文章主要介紹了vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
本篇文章主要介紹了詳解Vue應(yīng)用部署到服務(wù)器的正確方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-07-07
這篇文章主要介紹了如何使用ant-design-vue的Table組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
我們知道每一個(gè)vue項(xiàng)目應(yīng)用都是通過vue的構(gòu)造函數(shù)進(jìn)行創(chuàng)建一個(gè)新的vue項(xiàng)目的。創(chuàng)建vue實(shí)例的配置對(duì)象，可以包括一下屬性選項(xiàng)，比如：data、methods、watch、template等等，每一個(gè)選項(xiàng)都有不同的功能，大家可以根據(jù)自己的需求選擇不同的配置2022-08-08
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04