before vue路由钩子_Vue 路由钩子

路由钩子主要作用是拦截导航，让他完成跳转或者取消跳转。比如登录界面输入了账号、密码，主界面需要展示账号，但是你没有把 “账号” 这个字段保存到 vuex 或者 session 里面，直接跳转会导致主界面显示空白，这个时候你就需要一个 beforeRouteLeave 路由钩子，还没有数据的情况下，禁止界面跳转，举例子(伪代码)：

beforeRouteLeave(to,from,next){

if('account' === ' '){

next(false);

}else{

next();

};

};

大概就是这么个意思，参数 to ——是要跳转到的界面，from —— 从哪个界面离开，next() —— 是否允许跳转，如果是 next(false) ——禁止跳转，next({name:LOGIN}) —— 跳转到登录界面(需要自己手动配置路由)，next() 或者 next(true) ——允许跳转。

路由钩子的主要实现方式有三种

1. 全局实现

1.1 使用 router.beforeEach 注册一个全局的 before 钩子：

var routes = [{

path:'/route1',

name:'route1',

component:() = > import('./index.vue') //调用的时候再开始加载

}]

const router = new VueRouter({

routes；

})

router.beforeEach((to, from, next) => {

next(false);

})

1.2 全局的 after 钩子，(after 钩子没有 next 方法，不能改变导航)

2. 路由独享

2.1 配置路由的时候可以直接增加 beforeEnter，功能类似 before。

var routes = [{

path:'/route1',

name:'route1',

component:() = > import('./index.vue') //调用的时候再开始加载

beforeEnter: (to, from, next) => {

next();

}

}]

3. 组件内实现的钩子

3.1 beforeRouteEnter

在导航确认之前调用，新组件的 beforeCreate 之前调用，所以特别注意它的 this 是 undefined

3.2 beforeRouteUpdate

用法：点击更新二级导航时调用。

3.3 beforeRouteLeave

离开当前界面之前调用，用法：1. 需要的保存或者删除的数据没有完成当前操作等等原因，禁止界面跳转。