Home > Article > Web Front-end > Introduction to navigation guards inside vue.js components
This article brings you an introduction to the navigation guard inside the vue.js component. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
beforeRouteEnter
beforeRouteUpdate (new in 2.2)
beforeRouteLeave
① beforeRouteEnter Before entering the component
is called before entering the component. The component instance has not been created yet and the this keyword cannot be used.
However, you can access the component instance by passing a callback to next
, which means you can call back the instantiated component through next. Use the vm parameter of the next function as this
export default { name: "Admin", data(){ return{ infor:'hw' } }, beforeRouteEnter:(to,from,next)=>{ //此时该组件还没被实例化 alert(this.infor); //弹出消息框信息为 undefined next(vm =>{ //此时该组件被实例化了 alert(vm.infor); //弹出消息框信息为 hw }) } }
②beforeRouteLeave After leaving the component
## Called after leaving the component, you can call this keyword
export default { name: "Admin", beforeRouteLeave(to,from,next){ if(confirm("确定离开吗?") == true){ next() //跳转到另一个路由 }else{ next(false);//不跳转 } } }
③beforeRouteUpdate Called when the component is reused
This component is called when it is reused. You can call this keyword beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
}
Related recommendations:
The above is the detailed content of Introduction to navigation guards inside vue.js components. For more information, please follow other related articles on the PHP Chinese website!