路由中的钩子函数

1.路由配置文件中写钩子函数

注:在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。

// 配置路由
export default
[
{
path: '/',
name:'Hello',
component:Hello
},{
path:'/params/:newsId(\d+)/:newsTitle',//(\d+)正则数字
component:Params,
beforeEnter:(to,from,next)=>{
console.log(to);
console.log(from);
next();
}

]

2.模板中写钩子函数

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

  • beforeRouteEnter:在路由进入前的钩子函数。
  • beforeRouteLeave:在路由离开前的钩子函数。

Params.vue

<script type="text/javascript">
export default{
data () {
return{
msg:"params page"
}
},
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入params模板");
next();
},
beforeRouteLeave:(to,from,next)=>{
console.log("准备离开params模板");
next();
}
}
</script>

原文地址:https://www.cnblogs.com/zhouyx/p/7448333.html