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)
	}
}

你可能感兴趣的:(vue路由守卫,vue)