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 页面。