[10]路由中的钩子

2019-08-15  本文已影响0人  你喜欢吃青椒吗_c744

资料来源于技术胖的个人网站

我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中,也可以写在我们的组件模板中。

路由配置文件中的钩子函数 beforeEnter

我们可以直接在路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。

{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我进入了params模板');
        console.log(to);
        console.log(from);
        next();
},

next()相当于一个开关,如果不写next()或者next(false),就无法跳转;若next(true)就可以跳转。

next({ path: '/login'})还可以带路径,可以在beforeEnter中判断,若没有登录,不予跳转到其他页面,只能跳转到登录页面。

写在模板中的钩子函数

在配置文件中的钩子函数,只有一个钩子-beforeEnter,如果我们写在模板中就可以有两个钩子函数可以使用:

export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>
//它可以监控到路由的进入和路由的离开,
//也可以轻易的读出to和from的值。
上一篇下一篇

猜你喜欢

热点阅读