導語：
使用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全棧工程師，我們下期再見！