vue-router的三种钩子函数及用处( 用户登录状态验证)

路由中有三个基本的概念 route, routes, router。

route：单一路由， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
routes ：一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
router ：是一个机制，相当于一个管理者，它来管理路由。，定义路由只是静止的，当点击完毕后，需要在数组中查询，并且在页面显示出来。

vue-router的三种钩子函数及用处

一、全局钩子函数 beforeEach 和 afterEach

beforeEach 和 afterEach 是vue-router实例对象的属性
注意：每次路由跳转，都会执行beforeEach和afterEach

router.beforeEach有三个参数：to/from/next

router.beforeEach(function (to,from,next) {
   
  console.log(to);//到达的路由
  console.log(next);//管道中，可以跳转到其他路由
  console.log(from);//离开的路由
  next();
})

注意（next）

next() //正常跳转，不写的话，不会跳转，next（false）取消跳转

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

router.afterEach有两个参数：to/from

router.afterEach(function (to,from) {
   
  console.log(to);//