What are the three types of vue routing guards?

There are three types of routing guards in Vue, namely: global routing guards (global front guards, global post guards), intra-component routing guards, and route exclusive guards (which are given separately on the routing configuration page). A guard for routing configuration).

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Route guard can also be route interception. We can use route interception to determine whether the user is logged in and whether the user has permission to browse the page. It needs to be combined with meta to implement

Route guard in vue There are three types in total, one is the global routing guard, one is the intra-component routing guard, and the other is the router exclusive guard

The so-called routing guard can be simply understood as the security guard at the door of a house. If you want to enter the house, You have to pass the security check and tell the routing guard where you are from? You can't just let strangers in? Where to go? And then the security guard tells you what to do next? If you are indeed a person allowed to enter by the owner of the house, then you will be allowed to enter. Otherwise, you will have to call the owner of the house and discuss with the owner (log in and register) to give you permission.

1. Global guard

1. router.beforeEach((to,from,next)=>{})

2. The parameters in the callback function, to: which route to enter, from: which route to leave from, next: function, decide whether to display the routing page you want to see.

3. Take the following example: Set global guard in main.js

• In main.js, there is a routing instantiation object router. Setting guards in main.js is already a global guard.
• As follows, determine whether the path that to.path is currently entering is login or registration. If so, execute next() to display the current interface. If not, an alert pops up and then moves to the login interface.
• This can be achieved. When the user is not logged in, the login interface is always displayed.

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

4. Global post hook router.afterEach((to,from)=>{})

• Only two parameters , to: which route to enter, from: which route to leave from.
• As follows, every time you switch routes, an alert will pop up. After clicking OK, the current page will be displayed.

router.afterEach((to,from)=>{
  alert("after each");
})

5. Determine whether store.gettes.isLogin === false is logged in

2. Guards within the component

1. When reaching this component, beforeRouteEnter:(to,from,next)=>{}

• In the Admin.vue file, click Go When admin routes, execute the beforeRouteEnter function
• to, and the from parameter is consistent with the above usage. The next callback function is slightly different.
• As shown in the following example, there are special circumstances for guards in the data component. If we directly use
  beforeRouteEnter:(to,from,next)=>{ alert("hello" this.name); }When you access the admin page, you will find that the alert outputs hello undefined. This is because our data attributes cannot be accessed now, and the execution order is inconsistent, which is related to the declaration cycle. Before execution is completed, the data data has not been rendered. So here, next() will give a corresponding callback to help complete.

<script>
export default {
    data(){
        return{
            name:"Arya"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("hello" + vm.name);
        })
    }
}
</script>

2. When leaving this component, beforeRouteLeave:(to,from,next)=> {}

• When clicking on other components, determine whether to confirm and leave. Confirm execution of next(); cancel execution of next(false) and stay on the current page.

beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    }

3. Route exclusive guard

1. beforeEnter:(to,from,next)=>{}, usage Consistent with global guards. Just write it into one of the routing objects and it will only work under this route.

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What are the three types of vue routing guards?. For more information, please follow other related articles on the PHP Chinese website!