组件内的导航守卫

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 }

 

posted @ 2018-07-14 15:44  前端极客  阅读(2646)  评论(0编辑  收藏  举报