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.

There are three types of guards within the component

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:

vue.js global routing Implementation of the navigation guard below

Vue.js route display setting method introduction

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!