vue-router

mode

对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
为了达到这一目的，浏览器当前提供了以下两种支持：

1..hash(默认). —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL >中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

.2.history. —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

****差异化****

1.向后端发起请求的差异点：

hash模式 下仅 hash 符号之前的内容会被包含在请求中因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式 前端的 URL 必须和实际向后端发起请求的 URL 一致，否则将会返回404的错误。在实际项目中我们要在服务端增加一个覆盖所有情况的候选资源比如 ###/404 兼容页面错误。

2..刷新页面的差异点.：

hash模式 在页面中直接强行刷新页面（f5）不会去重新请求后端服务器
history模式 在页面中直接强行刷新页面（f5）会去重新请求后端服务器。在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404错误

路由守卫

****beforeEach****

全局前置守卫：eg：可用于权限管理时判断是否拥有权限进入该页面，全局进度条开始执行

****afterEach****

全局后置钩子：eg：可用于动态添加页面标题，介绍进度条加载、

路由元信息

定义路由的时候可以配置 meta 字段。根据业务的需要我们可以在meta中定义一些全局的参数，方便于开发中的统一输出与数据的处理。比如：标题，权限，路由守卫等等。例如

const ADD_TEXT = '新建'
const EDIT_TEXT = '编辑'
const SUCCESS_TEXT = '完善资料'
router.afterEach((routeTo, routeFrom, next) => {
  // 获取meta中的参数 --- routeTo.meta
  // 动态添加页面标题
  const name = routeTo.params.name
  const marginBottom = routeTo.meta.marginBottom || 0
  const variableIndex = routeTo.meta.variableIndex
  let titles = routeTo.meta.titles ? [...routeTo.meta.titles] : []
  // 判断该页面是否是变动的标题
  if (variableIndex || variableIndex === 0) {
    if (routeTo.query.complete || routeTo.params.complete) {
      titles[variableIndex] = SUCCESS_TEXT
    } else {
      titles[variableIndex] = (routeTo.query.id || routeTo.params.id ? EDIT_TEXT : ADD_TEXT) + titles[variableIndex]
    }
  }
  titles[titles.length - 1] = name || titles[titles.length - 1]
  if (titles) {
    store.commit('global/SET_CURRENT_TITLES', titles)
  }
  store.commit('global/SET_MARGIN_BOTTOM', marginBottom)
  NProgress.done()
})