vue 全域性導航守衛

2022-09-03 18:18:08 字數 1083 閱讀 4928

現在有個需求是,路由間進行切換時,順便把頁面的標題也修改了;比如說當前a路由,那標題是a;切換到b路由,那標題變成b,以此類推。

很多人的做法是這樣的,在每個路由的created()寫**,直接document.title="a"/"b"/"c"不就可以了嗎?那這樣是不是太麻煩了,每個路由都要去加這麼個**。(順便在普及下:created是元件剛被建立後可以**的方法,mounted是元件的template掛載到dom上面後**的方法,updated是當template模板中內容發生改變時會呼叫的函式)

因此全域性導航守衛能夠幫助我們解決上面的問題,只要路由發生的跳轉了,守衛就箭頭到,並執行相應的處理,要實現這個守衛,只需要在route/index.js重寫router的乙個方法即可,如下:

const router =createrouter()

//是這個方法;在路由跳轉前,會呼叫該方法

router.beforeeach((to,from,next) =>)

可能很萌b的是調 to路由物件的matched[0].meta.title是什麼東西啊?首先每個路由呢是可以自定義資料的,通過乙個meta屬性來定義,你就可以理解成通過meta屬性來自定義路由的某些資料,如下:

const routes =[

}]

上面的我就搞了元資料title,方便其他比如路由跳轉時可獲取,但大家很納悶,直接to.meta.title不就可以了嘛?搞個matched[0]是什麼東西?

首先 to.meta.title也是可以的沒毛病,但如果是 to路由是子路由,子路由裡沒有定義meta,而他的父路由有meta,這時候是不是就拿不到資料啦?這麼說吧,to.matched是拿到乙個陣列,這個陣列裡包含父路由物件以及子路由物件,而父路由物件是被放在第乙個位置,即 [0],這樣的話,不管to是不是父、子路由,通通取 父路由的meta

剛才的beforeeach,是被叫做全域性的前置導航守衛,還有乙個是aftereach,是後置的全域性守衛,當路由跳轉完畢後會執行的方法。

router.aftereach( (to,from) =>)

除了全域性守衛,還有路由獨享守衛和 元件守衛,可以檢視vue的官網來學習。

vue導航守衛

import vue from vue import router from router import store from store import elementui from element ui import element ui lib theme chalk index.css vue...

VUE全域性路由守衛

大專案都會採用,因為需要驗證使用者是否登入等問題 在使用vue router時會進行router跳轉,跳轉時,我們能對路由進行暫時攔截,進行一系列條件判斷 比如使用者登入情況,是不是vip使用者等 在根據判斷進行導航 beforeeach 在 router index 下進行配置 const rou...

vue之全域性守衛

vue的路由守衛是什麼東西呢?第一次接觸很懵逼,知道自己遇到了這樣乙個需求,在頁面之間進行路由跳轉時,需要進行乙個判斷,如果下乙個頁面是需要登入後才能進入的頁面,那麼就需要在點選進入該頁面的時候進行守衛的判斷,判斷使用者是否登入,如果登入過了。就直接進入需要進入的頁面,如果沒有登入過,則進入登入頁面...