vue如何根據不同路由位址更改頁面的標題

2021-10-10 19:32:57 字數 752 閱讀 9875

先上效果圖

這個效果實現起來很簡單,只需要用到vue-router中的全域性路由守衛

分別有beforeeach(進入路由之前),beforeresolve(解析路由)以及全域性後置鉤子aftereach

我們可以簡單的看一下這三個守衛和生命週期函式的關係,我們用日誌列印一下看看

可以看出,這三個守衛全部在生命週期函式之前執行,所以在全域性守衛中是不能呼叫vue例項的,因為例項還未被解析

我們利用全域性前置守衛beforeeach就可以實現更改標題的效果

router.

beforeeach

((to,

from

,next)

=>

)

meta欄位是配置路由資訊時加入的字段

meta:

將你所有需要跳轉的路由資訊中配置好meta欄位,然後使用document.title就可以進行更改了

同樣能實現這樣效果的方法是我們可以使用beforecreate生命週期函式來實現,原理相同,但是對於**的侵入性較高,不建議大家使用,還是路由守衛更加快捷

好啦,希望不足之處可以請大佬不吝賜教!

根據訪問位址不同動態更改資料請求介面位址

本人在專案開發中,因為專案放在多個伺服器,有多個訪問位址,所以後台沒有給固定的介面請求位址,需要通過判斷線上訪問位址,來動態修改介面位址,也就是介面位址 訪問位址 介面名 怎麼實現呢,思路就是獲取訪問位址,擷取字串,再拼接 var urlstr window.location.href 獲取訪問位址...

vue根據引數不同的路由跳轉以及name的作用

最近在做vue路由跳轉根據引數的值不同但是跳轉的是同乙個路由的功能。點選左邊的目錄,根據目錄id跳轉不同的列表。如下圖。路由跳轉的 this.router.push 也可以這麼寫 this.router.push 這兩種其實都可以跳轉到想要的路由。但是我如果想要根據id的值不同而去跳轉相同的路由,以...

Flask框架下不同路由如何傳遞引數

前兩天參加阿里雲7天培訓,用python flask寫了乙個基於阿里雲視覺ai平台的識別身份證 駕駛證以及車牌自動生成汽車保險單 這麼乙個小玩意,搞了我一晚上,頭疼,到最後還是個半成品 通過上傳身份證 駕駛證以及車牌,呼叫阿里雲的api,去識別裡資訊,將返回的資訊回填到乙個汽車保險單上。那麼怎麼在不...