Vue路由守卫的三种方式,及其钩子函数和参数
1)、全局守卫全局守卫有前置守卫和后置守卫,是vueRouter对象的两个钩子函数,分别是 beforeEach和afterEach。前置守卫:router.beforeEach((to, from, next) => {//to: 目标路由//from: 当前路由// next() 跳转一定要调用next(false);//不让走next(true);//继续前行next('/logi
·
1)、全局守卫
全局守卫有前置守卫和后置守卫,是vueRouter对象的两个钩子函数,分别是 beforeEach和afterEach。 前置守卫:
router.beforeEach((to, from, next) => { // to: 目标路由 // from: 当前路由 // next() 跳转 一定要调用 next(false);//不让走 next(true);//继续前行 next('/login')//走哪 next({path:'/detail/2',params:{},query:{}})//带点货 }
后置守卫:
router.afterEach((to,from)=>{ //全局后置守卫业务 })
如果能够回答上过程,肯定有加分:
//过程: 1、请求一个路径:如:/Index 2、经历前置守卫 决定了能去哪个路径 3、根据去的路径,找对应component(路由配置) 4、经过后置守卫 5、创建组件
2)、路由独享守卫
写在路由配置里。钩子函数名:beforeEnter,只有前置守卫
如:
// src/router/index.js { path: '/user', component: User, beforeEnter: (to,from,next)=>{ //路由独享守卫 前置 console.log('路由独享守卫'); if(Math.random()<.5){ next() }else{ next('/login') } } }
3)、组件内部守卫
写在组件对象里。分别有前置守卫,后置守卫,路由改变守卫(当前组件被复用的情况,不是路径改变)三个钩子函数。
export default{ data(){return {}} …………………… //组件内部钩子 beforeRouteEnter (to, from, next) {//前置 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) {//后置 // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } }
更多推荐
已为社区贡献2条内容
所有评论(0)