vue 路由 7 導航守衛》

導航守衛

1、什麼是導航守衛?

(1)vue-router提供的導航守衛主要用來監聽路由的進入和離開。

(2)vue-router提供了beforeeach和aftereach的函式, 它們會在路由即將改變前和改變後觸發。

2、為什麼要用導航守衛？

我們來考慮乙個需求:  頁面跳轉時如何改變網頁的標題呢?

網頁標題是通過來顯示的, 但是應用只有乙個固定的html, 切換不同的頁面時, 標題並不會改變。但是我們可以通過j**ascript來修改的內容.window.document.title = '新的標題'。

那麼在vue專案中, 在**修改? 什麼時候修改比較合適呢?

方法一、

每乙個路由對應的元件.vue檔案中，通過mounted宣告週期函式, 執行對應的**進行修改即可。

缺點：但是當頁面比較多時, 這種方式不容易維護(因為需要在多個頁面執行類似的**).

方法二、

使用導航守衛就比較容易做到這點。

// 前置守衛(guard)

//引數說明

//to: 即將要進入的目標的路由物件.

//from: 當前導航即將要離開的路由物件.

//next: 呼叫該方法後執行

router.beforeeach((to, from, next)

// 後置鉤子(hook)

router.aftereach((to, from)

補充：更多的導航守衛可以在官網檢視學習

點選about

注：主要是標紅的幾個檔案

//引入路由

import from 'vue-router'
import home from '../views/home.vue'
//定義路由
const routes = [
}, }]
//建立路由
const router = createrouter()
// 前置守衛(guard)
//引數說明
//to: 即將要進入的目標的路由物件.
//from: 當前導航即將要離開的路由物件.
//next: 呼叫該方法後執行
router.beforeeach((to, from, next) => )
// 後置鉤子(hook)
router.aftereach((to, from) => )
//返回了路由
export default router

home |

about | 

home page

vue路由導航守衛的使用

路由導航守衛,顧名思義就是像守衛 一樣對路由進行監聽判斷,驗證身份 使用路由導航守衛可以避免使用者不進行登陸操作而直接訪問到後台介面,使用方法 在路由檔案中匯出路由物件之前新增乙個導航守衛,有三個引數,分別是到哪個路由去,從哪個路由來,next跳轉 下面 是判斷是否去的是login介面,如果去log...

路由導航守衛

路由導航守衛 可以建立在main.js同級目錄下的permission.js中 main.js 直接引入使用 路由導航守衛 import router from router import store from store 引入進度條外掛程式 import nprpgress from nprogr...

VueRouter 導航守衛 路由守衛

就是導航過程中各個階段的鉤子函式。分為 全域性導航守衛 路由導航守衛 元件導航守衛。在整個網頁中，只要發生了路由變化，就會觸發。全域性導航守衛主要包含兩個函式 beforeeach aftereach。在路由發生了改變，但是還沒有成功跳轉的時候會呼叫。router.beforeeach functi...