vue-router全局钩子函数+单个路由钩子函数+组件内钩子函数
1. vue-router全局钩子函数beforeEach和afterEach是vue-router实例对象的属性特别提醒:每次路由跳转,都会执行beforeEach和afterEachbeforeEachvar router=new Router({routes: [{path: '/',name: 'Ch...
·
1. vue-router全局钩子函数
beforeEach和afterEach是vue-router实例对象的属性
特别提醒:每次路由跳转,都会执行beforeEach和afterEach
beforeEach
var router=new Router({
routes: [
{
path: '/',
name: 'Chat',
component: Chat
}
]
});
router.beforeEach有三个参数:to/from/next
router.beforeEach(function (to,from,next) {
console.log(to);//到达的路由
console.log(next);//管道中,可以跳转到其他路由
console.log(from);//离开的路由
next();
})
router.afterEach有两个参数:to/from
router.afterEach(function (to,from) {
console.log(to);//到达的路由
console.log(from);//离开的路由
})
2. 单个路由钩子函数beforeEnter
beforeEnter有三个参数:to/from/next
{
path: '/',
name: 'Login',
component: Login,
beforeEnter: (to, from, next) => {
console.log("我即将进入login1111111111111");
next();
}
},
3.组件内钩子函数
beforeRouteEnter+beforeRouteUpdate+beforeRouteLeave
都有三个参数:to/from/next
beforeRouteEnter:进入这个组建路由之前
beforeRouteLeave:离开这个组建路由
特别注意:
beforeRouteUpdate:再本路由的下级路由切换才会触发beforeRouteUpdate
methods:{
success:function(){
this.$router.push({ path: '/chat' });
},
},
computed:{
},
beforeRouteEnter:function(to,from,next){
console.log("进入这个组建1111111");
next()
},
beforeRouteUpdate:function(to,from,next){
console.log("在二级导航里面切换了22222");
next()
},
beforeRouteLeave:function(to,from,next){
console.log("离开这个组建更新3333333");
next()
},
更多推荐
已为社区贡献2条内容
所有评论(0)