Vue-Router模式和钩子的用法

上一篇主要写了一下vuer-router的基本使用，可以说解决温饱了，下面就再来点下午茶吧

模式

vue-router中的模式选项主要在router实例化的时候进行定义的，如下

const router = new VueRouter({
　　　mode: 'history', // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

有两种模式可供选择，history 和 hash，大致对比一下，

hash模式对于后台来讲就是一个url，因为地址中的hash值是不会传到后台的，所以服务器端做一个根地址的映射就可以了。
history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。或者采用模糊匹配的方式进行映射。

除此之外，history模式下，如果后端不是一对一的进行映射，而是模糊匹配的话，那么就要注意一下404的情况了。这个时候就需要在前端router中定义404页面了。

404路由的定义

由于router本身的匹配是从上到下的，如果在前面找到了匹配的路由，就跳转了。因此可以直接在最后添加404的路由，如下

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: '红包'
    }
  }]}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-页面丢了'
  }
}]

在前面匹配不到的时候，* 代表全部，就是都指向404页面

路由钩子

路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的，靠。。好拗口啊。

总体来讲vue里面提供了三大类钩子

1、全局钩子
2、某个路由独享的钩子
3、组件内钩子

全局钩子

顾名思义，全局钩子全局用，使用如下

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})
router.afterEach(route => {
})

某个路由独享钩子

就像说的一样，给某个路由单独使用的，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。如下