详解VueRouter进阶之导航钩子和路由元信息
导航钩子vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的,单个路由独享的,或者组件级的。 全局钩子你可以使用 router.beforeEach 注册一个全局的 before 钩子： router.beforeEach((to,from,next) => {
// ... }) 当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 resolve 完之前一直处于 等待中。 每个钩子方法接收三个参数：
确保要调用 next 方法，否则钩子就不会被 resolved。 同样可以注册一个全局的 after 钩子，不过它不像 before 钩子那样，after 钩子没有 next 方法，不能改变导航： {
// ...
})
你可以在路由配置上直接定义 beforeEnter 钩子： {
// ...
}
}
]
})
这些钩子与全局 before 钩子的方法参数是一样的。 组件内的钩子 最后，你可以在路由组件内直接定义以下路由导航钩子： beforeRouteEnter 钩子 不能 访问 this，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。 不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。 {
// 通过 `vm` 访问组件实例
})
}
路由元信息你可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。 定义路由的时候可以配置 meta 字段： 那么如何访问这个 meta 字段呢？ 首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录 例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。 一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航钩子中的 route 对象）的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。 下面例子展示在全局导航钩子中检查 meta 字段： {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth,check if logged in
// if not,redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |