vue-router的路由守衛，hash路由和history路由

關於路由的一些理解

以下面的router下的index.js文件為例。

import Vue from 'vue';
import Router from 'vue-router';
import {publicRoute, protectedRoute} from './config';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { getToken } from '@/util/auth'
const routes = publicRoute.concat (protectedRoute);
// 解決兩次訪問相同路由地址報錯
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

Vue.use (Router);
const router = new Router ({
  mode: 'hash',  //hash路由和history路由可選
  linkActiveClass: 'active',  //用來做選中樣式的切換
  routes: routes,  //路由路徑
});
// router gards 路由守衛
router.beforeEach ((to, from, next) => {
  NProgress.start();
  document.title = `某系統-${to.meta.title}`
  if (to.meta.public) {
    next()
  } else {
    if (to.path != '/login' && (!getToken() || getToken() == 'undefined')) {
      NProgress.done()
      next({
        path: '/login',
      })
    } else {
      NProgress.done()
      next()
    }
  }
});

router.afterEach ((to, from) => {
  NProgress.done ();
});

export default router;

1. 路由守衛之beforeEach

router.beforeEach（）一般用來做一些進入頁面的限制。比如沒有登錄，就不能進入某些頁面，只有登錄了之后才有權限查看某些頁面，說白了就是路由攔截。

每個守衛方法接收三個參數：

to:   即將要進入的目標 路由對象

from:   當前導航正要離開的路由

next:    一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed (確認的)。

next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。

next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

路由攔截是我們項目中經常遇到的普遍問題，例如當你訪問任何一個頁面的時候需要驗證該用戶有沒有登錄等；對此，vue-router提供的beforeRouter可以方便的實現路由的導航守衛。

2. active-class

active-class是vue-router模塊的router-link組件中的屬性，用來做選中樣式的切換。

3. NProgress

NProgress是頁面跳轉是出現在瀏覽器頂部的進度條

//用法

NProgress.start();

NProgress.done();

4.hash路由和history路由

router有兩種模式：hash模式（默認）、history模式（需配置mode: 'history'）。兩種模式的區別：簡單回答：hash模式url帶#號，history模式不帶#號。

hash 就是指 url 尾巴后的 # 號以及后面的字符。這里的 # 和 css 里的 # 是一個意思。hash 也 稱作 錨點，本身是用來做頁面定位的，她可以使對應 id 的元素顯示在可視區域內。

由於 hash 值變化不會導致瀏覽器向服務器發出請求，而且 hash 改變會觸發 hashchange 事件，瀏覽器的進后退也能對其進行控制，所以人們在 html5 的 history 出現前，基本都是使用 hash 來實現前端路由的。

已經有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，為什么還要搞個 history 呢？
首先，hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基於 url 的，如果要傳遞復雜的數據，會有體積的限制，而 history 模式不僅可以在url里放參數，還可以將數據存放在一個特定的對象中。

history 模式改變 url 的方式會導致瀏覽器向服務器發送請求，這不是我們想看到的，我們需要在服務器端做處理：如果匹配不到任何靜態資源，則應該始終返回同一個 html 頁面。