vue動態(tài)修改頁面title的兩種方法
更新時間：2023年06月27日 09:53:46 作者：芒果沙冰喲
本文主要介紹了vue動態(tài)修改頁面title的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
vue項目有時候需要根據(jù)頁面需要動態(tài)的去修改頁面標(biāo)題名稱,首先看一下效果圖:
上圖就是動態(tài)修改前后的對比圖,可能還是不夠形象,看看router路由里面的配置項:
方法一:
一般在配置路由的時候會配一個靜態(tài)的title,當(dāng)有些頁面需要修改時,這個時候就需要使用到路由守衛(wèi),寫在需要修改title的頁面:
beforeRouteEnter(to, from, next) {
//to是當(dāng)前頁面,from是從哪里來,next是放行
if (to.query.name) {
to.meta.title = to.query.name //獲取從上個頁面?zhèn)鬟^來的name再進(jìn)行修改
}
next() //切記操作完一定要記得放行,否則無法正常跳轉(zhuǎn)頁面
},A頁面跳轉(zhuǎn)時需要帶的name參數(shù)(就是需要修改的title):
handleGo() {
this.$router.push({
path: '/demo/study',
query: {
name: '做前端死路一條',
},
})
},方法二(簡單直接):
handleGo() { this.$router.push('/demo/study') document.title = '1111' //直接等于需要修改的名字即可 },跳轉(zhuǎn)后修改的效果是這樣的 :
還有一個踩坑的地方,當(dāng)需要跳轉(zhuǎn)時重新打開一個頁面再修改頁面標(biāo)題,就不能使用簡單直接的方法二,還是需要使用頁面的路由守衛(wèi):
handleGo() {
let { href } = this.$router.resolve({
path: '/demo/study',
query: {
name: '天氣有點熱',
},
})
window.open(href, '_blank')
},然后基本功能就這樣,可以試著動手看看
到此這篇關(guān)于vue動態(tài)修改頁面title的兩種方法的文章就介紹到這了,更多相關(guān)vue動態(tài)修改頁面title內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中h函數(shù)和render函數(shù)的區(qū)別淺析
這篇文章主要介紹了Vue中h函數(shù)和render函數(shù)的區(qū)別的相關(guān)資料,h函數(shù)是工具,負(fù)責(zé)創(chuàng)建節(jié)點, render函數(shù)是過程,負(fù)責(zé)組織節(jié)點并生成最終的虛擬DOM,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
vue?使用mescroll.js框架實現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實現(xiàn)下拉加載和上拉刷新功能,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue watch immediate方法用法詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端省市區(qū)選擇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
輪播圖是前端很常用的一個網(wǎng)頁特效，幾乎所有的網(wǎng)站或多或少都會用到這個特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實現(xiàn)移動端圖片輪播組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
這篇文章主要介紹了vite+vue3+ts項目中提示無法找到模塊的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在本篇文章中我們給大家整理了2種關(guān)于VUE項目中使用百度地圖的最簡單的方法，非常實用，一起來學(xué)習(xí)下。2018-09-09
vue.js使用v-model實現(xiàn)父子組件間的雙向通信示例
這篇文章主要介紹了vue.js使用v-model實現(xiàn)父子組件間的雙向通信,結(jié)合實例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實現(xiàn)技巧,需要的朋友可以參考下2020-02-02
vue-cli創(chuàng)建項目及項目結(jié)構(gòu)解析
上一篇我們安裝了vue-cli，接下來我們就使用該腳手架進(jìn)行創(chuàng)建項目，這篇文章主要介紹了vue-cli創(chuàng)建項目以及項目結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06