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>