vue-router导航守卫

官方API:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
首先要搞清楚router和route的区别
router是路由的实例对象，路由的跳转就是通过这个对象
route是路由对象，主要是当前路由的一些属性，如下图

导航守卫： 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

全局的导航守卫

这要是该页面中的路由跳转不管是那个都触发这个router.beforeEach这个钩子函数要写在全局中

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
  // 在路由成功跳转触发
  // to 是跳转到那个路由中
  // from 是跳转之前那个路由
  // next next()主要是起一个中间的作用
  	next(); // 前往下一个路由
  	next(false); // 打断路由的跳转
  	next({path:'/Login'}); // 跳转到/Login这个路由中
})
// 路由成功跳转后触发 因为都跳转成功了就没有next()了
router.afterEach((to, from) => {
  // 写一些跳转之后要干的事
})

路由独享的守卫

某个路由对象单独拥有的跳转监听作用和上面的一样

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫

这个要写在组件中

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this` 指向该组件不是Vue实例
    // 因为当守卫执行前，组件实例还没被创建
    // 这里一般会对服务器发出一些请求并且对从服务器上获取的值处理或者在下面处理看情况
     next(vm => {
    // 通过 `vm` 访问组件实例
 	 })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 如果是/foo/:id这样的路由 修改后的:id 不会让执行beforeRouteEnter
    // 所以这里有时和上面的钩子函数内容一样
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    // 在这里对从服务器上获取的到值进行处理
    
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
	  const answer = window.confirm('确定要离开该页面么？')
	  if (answer) {
	    next()
	  } else {
	    next(false)
	  }
  }
}

结合上面的路由守卫我们可以实现一些权限控制

var router = new VueRouter({
	routes:[
		{
			path:'/login',
			.....,
			meta:{isGo:true},
			.....
		}
	]
})
router.beforeEach((to,from,next) => {
	if(to.path === '/login'){
		if(to.meta.isGo){
			next()
		}else{
			next(false)
		}
})