導語：
使用vue的時候總會使用到前端vue-router路由，檢驗登陸狀態，檢驗是否路由跳轉，就需要路由守衛來解決，這一篇文章教會你使用路由守衛，
這里寫目錄標題
- 一，全域路由守衛
- 二，路由獨享的守衛
- 三，組件內的路由守衛
一，全域路由守衛
我們在前端專案里面的main.js檔案
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
router.beforeEach((to, from, next) => {
// ...
});
new Vue({
el: "#app",
store,
router,
components: { App },
template: "<App/>"
});
這是全域路由守衛，每次路由跳轉的時候，都會觸發這個函式，
to就是去的路由
from是跳轉前的路由
next就是確認跳轉
這個全域的路由守衛，可以用來檢驗網址用戶是否已經登陸，因為每次跳轉的時候，都會執行這個函式，只要我們在這個函式里面，設定就行了，
如下：
router.beforeEach((to, from, next) => {
//vuex里面的userinfo是否已經存在，不然就直接跳轉到登錄頁面
if(store.state.userInfo || to.path === "/login") {
next();
} else {
next({
path: "/login"
})
}
});
二，路由獨享的守衛
指某個路由頁面獨享這個守衛，其他的路由不能使用，提高了路由守衛的靈活性，
routes: [
{
path: "/home",
component: home,
beforeEnter: (to, from, next) => {
//進入這個路由前，檢驗登陸
if(store.state.userInfo || to.path === "/login") {
next();
} else {
next({
path: "/login"
})
}
}
}
];
三，組件內的路由守衛
判斷用戶要離開該路由的時候，檢驗是否用戶已經保存該編輯頁面內容，如果沒有，跳出提示框，是否不保存離開該頁面，
<template>
<h1>xiaomizhou</h1>
</template>
<script>
export default {
data(){
return{
name:"xiaomizhou"
}
},
//路由進入前呼叫
beforeRouteEnter:(to, from, next)=>{
alert("Hello"+this.name);
alert(to.path + from.path);
next();
next(vm => {
alert("Hello"+vm.name);
})
},
//路由離開時呼叫，可以用在編輯頁面
beforeRouteLeave:(to, from, next) => {
if(confirm("離開該頁面，不會保存你的操作，確認離開嗎？") == true){
next();
}else{
next(false);
}
}
}
</script>
補充：
微信搜索【web小館】
回復 【書籍】，即可獲取 前端學習資料，
回復 【全堆疊博客專案】，即可獲取專案原始碼，
每天用最簡單樸實的語言，潛移默化的提升你的計算機基礎知識和前端技術，小米粥，一個專注的web全堆疊工程師，我們下期再見！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/169735.html
標籤：java
上一篇：這次生日我想寫點什么
下一篇：【資料結構——堆疊篇】