vue路由的导航守卫

1.介绍：

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
每个守卫接受三个参数：
（1）to:即将要进入的目标路由对象
（2）from:当前导航正要离开的路由
(3) next:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。如果next函数没有执行或是传入了false等值，这个跳转就会被终止掉。

2.全局守卫

只要触发了路由就会触发路由前置和后置守卫
（1）全局前置守卫
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。只有等所有守卫resolve之前一直处于等待中。

用途：可以用来判断进入的路由是否想让一开始就进入的，如果不是可以让它跳转过去。

// 可以使用 router.beforeEach 注册一个全局前置守卫
//通过判断path，来进行操作.如果进入的路由不是foo1，那么就让他进去foo2中
const router = new VueRouter({ routes:[{name:"demo1",path:"/demo1",component:  ,}]... })

router.beforeEach((to, from, next) => {
  // ...
    //next()
    if(to.path !== '/foo1'){
	//next({name:'/foo2'})
    next({path:'/foo2'})
}
next()
})

（2）全局后置守卫

后置守卫就没有next了，只有to和from。
用途：可以设置在进入路由后网页标题显示为对应路由里的元数据中的title
在routers中添加meta:{title:‘音乐排行榜’}
使用后置守卫：router.afterEach((t0,from)=>{
document.title = to.meta.title
})

3.路由独享守卫（beforeEnter）

写在routes中的，每个路由独有的，只在当前路由中生效。

// 可以在路由配置上直接定义 beforeEnter 守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...next() //当不给next的时候，就访问不了这个路由。
          const isLogin = false  //当要进入这个页面的时候要进行判断，如果登录了就让进入，如果没有登录就进入到登录页面中。
          if(!isLogin){
              next()
          }else {
              next('login')
          }
      }
    }
  ]
})

4.组件内的守卫（3个）

直接写在对应组件页面中。
beforeRouterEnter:进入该组件的对应路由后触发
beforeRouterUpdate:当同一个组件，path参数不同时，进行切换的时候触发。比如这种：path:/music/:id
beforeRouterLeave:要离开该组件的对应路由时触发。
（1）beforeRouteEnter
在这里不能使用this,这时实例还没有被创建
如果要使用this。用下面这种办法:在next中通过vm来代替this

beforeRouterEnter(to,from,next) {
	next( vm =>{
  		console.log(vm)   //相当于this
  })
}

（2）beforeRouteUpdate
在当前路由改变，但是只有在该组件被复用时调用。
举例来说：对于一个带有动态参数的路径/foo/:id 在/foo/1与/foo/2之间进行切换跳转的时候会复用foo组件，所以才会触发这个钩子。
（3）beforeRouteLeave
案例：当所在组件的路由要离开时，给个弹窗，是否退出，是就退出，next中值为false则不退出。

beforeRouteLeave(to,from,next){
	const answer = window.confirm("你确定要离开吗")
	if(answer){
		next()
    }else {
		next(false)
	}
}