组件内的导航守卫
beforeRouteEnter
是组件内的路由导航守卫,在确认渲染该组件的对应路由前调用。该守卫不能访问 this
,但我们通过传一个回调给 next
,就可以使用上面的 vm
来访问组件实例。守卫的参数说明如下:
to
:即将要进入的目标路由;from
:当前导航正要离开的路由,from.name
是路由的名称,对应路由配置中的name
;next
:一个用来 resolve 当前钩子的方法,需要调用该方法来确认或者中断导航;
参数 to
和 from
都是 路由对象 (route object),表示当前激活的路由的状态信息,其常用的属性有:
name
:路由的名称,如 'Register'
;path
:路由的路径,如 '/auth/register'
;params
:路由参数对象,如 { id: "1" }
;query
:URL 查询参数对象,如 { page: "1" }
;meta
:元信息对象,如 { auth: true }
;
1 // 组件内的路由导航守卫 2 beforeRouteEnter(to, from, next) { 3 // 路由的名称,对应路由配置中的 name 4 const fromName = from.name 5 6 // 确认导航 7 next(vm => { 8 // 通过 vm 参数访问组件实例,已登录时,评估路由名称 9 if (vm.$store.state.auth) { 10 switch (fromName) { 11 // 如果从注册页面跳转过来 12 case 'Register': 13 // 显示注册成功 14 vm.showMsg('注册成功') 15 break 16 } 17 } 18 }) 19 }
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;