Vue3中的導航守衛如何使用

一、什麼是導航守衛？

如其名，vue-router 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。這裡有很多方式植入路由導航中：全域的，單一路由獨享的，或是元件級的。

查看以下情形：

預設情況下，點選主頁連結可直接進入指定介面，但是該介面是需要使用者登入後方可存取的，這是個問題

可設定導航守衛來偵測使用者是否登錄，如果已登錄，則進入背景頁，如果未登錄，則強制進入登入頁，如圖

二、導航守衛有哪幾種？

1、全域守衛（3個）

全域前置守衛

每次發生路由的導覽跳轉時，都會觸發全域前置守衛，因此，在全域前置守衛中，程式設計師可以對每個路由進行存取權限的控制

#1、 使用方式

你可以在router/index.js 頁面中使用router.beforeEach((to, from, next) => {}) 註冊一個全域前置守衛。

2、 程式碼：

// router/index.js 页面

router.beforeEach((to, from, next) => {
    console.log(to, from);
    next()
});

全域解析守衛

1、 使用方式
你可以用 router.beforeResolve 註冊一個全域守衛。這和 router.beforeEach 類似，因為它在 每次導航時都會觸發，但是確保在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之後，解析守衛就被正確調用。

2、 程式碼：

// router/index.js 页面

router.beforeResolve((to, from, next) => {
    console.log(to,from);
    next()
})

全域後置鉤子

1、 使用方式
你也可以註冊全域後置鉤子，然而和守衛不同的是，這些鉤子不會接受next 函數也不會改變導航本身：

2、 程式碼：

// router/index.js 页面

router.afterEach((to, from) => {
    console.log(to,from);
})

它們對於分析、更改頁面標題、聲明頁面等輔助功能以及許多其他事情都很有用。

2、路由獨享守衛（1個）

1、 使用方式

你可以直接在路由設定上定義beforeEnter 守衛：

2、 程式碼：

// router/index.js 页面（路由规则中）

const routes = [
	{
	    path: '/home',
	    name: 'Home',
	    component: HomeView,
	    beforeEnter: (to, from,next) => {
	        console.log(to, from);
	        next()
	    },
	}, 
]

3、元件內守衛（3個）

元件內守衛有三個：路由進入之前beforeRouteEnter，路由離開時beforeRouteLeave,頁面更新時beforeRouteUpdate

beforeRouteEnter(to, from, next)

1、使用方式
在元件範本中使用,跟methods: {}等同等級書寫，元件路由守衛是寫在每個單獨的vue檔案裡面的路由守衛

2、程式碼：

// vue 组件内使用

onBeforeRouteUpdate((to, from) => {
  //当前组件路由改变后，进行触发
  console.log(to);
});

注意：在vue3中的setup 函數中是不可以使用beforeRouterEnter 這個路由守衛的

beforeRouteUpdate(to, from, next)

1、 使用方式
在元件模板中使用,跟methods: {} 等同層級書寫，元件路由守衛是寫在每個單獨的vue 檔案裡面的路由守衛

#2、 程式碼：

// vue 组件内使用

onBeforeRouteUpdate((to, from) => {
  //当前组件路由改变后，进行触发
  console.log(to);
});

beforeRouteLeave(to, from, next)

1、 使用方式在元件範本中使用, 跟methods: {} 等同等級書寫，元件路由守衛是寫在每個單獨的vue 檔案裡面的路由守衛

2、 程式碼：

// vue 组件内使用

onBeforeRouteLeave((to, from) => {
  //离开当前的组件，触发
  alert("我离开啦");
});

三、導航守衛的三個參數

• to：將要存取的路由資訊物件

• from：將要離開的路由資訊物件

• next：函數

  呼叫next()表示放行，允許這次路由導航

  呼叫next(false)表示不放行，不允許此路由導航

  呼叫next({routerPath})表示導覽至此位址，一般狀況使用者未登入時，會導覽至登陸介面

提示：函數在導覽守衛中可出現多次，但只能被呼叫一次!!!

四、如何在vue3 中使用beforeRouteEnter

#如果你正在使用組合API 和setup 函數來編寫元件，你可以透過onBeforeRouteUpdate 和onBeforeRouteLeave 分別加入update 和leave 守衛。請參考組合 API 部分以獲得更多細節。

請看vue-router的官方文件
導航守衛| Vue Router

方法一、我們可以在設定路由的時候，使用beforeEnter方法攔截，也就是在router.js中：

{
	path: '/',
	name: 'home
	component: () => import('@/xxx.vue'),
	beforeEnter: (to, from) => {
		// 可以在定义路由的时候监听from和to
	}
}

方法二、我們還可以使用vue2的寫法，使用選項式api，就可以使用beforeRouterEnter這個鉤子了

<script>
export default {
	beforeRouteEnter(to, from) {
		console.log(&#39;before router enter&#39;, to, from)
	},
	mounted() {
		console.log(&#39;mounted&#39;)
	},
}

五、模擬登入註冊案例

// 模拟是否登录（true为登录，false为未登录）
let token = true
router.beforeEach((to, from, next) => {
    // 判断有没有登录
    if (!token) {
    	// 如果没有登录，并且是跳转至登录页
        if (to.name == "Login") {
        	// 直接跳转
            next();
        } else {
        	// 否则直接强制跳转至登录页
            router.push('/login')
        }
    } else {
    	// 如果已经登录，并且不是跳转至登录页
        if (to.name !== "Login") {
        	// 直接跳转
            next();
        } else {
        	// 否则直接强制跳转至上一个页面
            router.push(from.path)
        }
    }
});

以上是Vue3中的導航守衛如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！