What types of vue routing guards are there?

There are three types of vue routing guards, namely: 1. Global guard "router.beforeEach"; 2. Guard within the component "beforeRouteEnter"; 3. Route exclusive guard "beforeEnter".

There are three types of routing guards in Vue, a global routing guard, an intra-component routing guard, and a route 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 must pass the security inspection. You must tell the routing guard where you come 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.

 // 通过这个匹配判断是否有该权限或要求，这个一般作为页面权限设置，比如哪些页面需要登录才能进入，哪些不需要
to.matched.some(res => res.meta.requireAuth)

1. Global guard

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

2. Parameters in the callback function, to: which route to enter, from: which route to leave from, next: function, which determines 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. The global post-hook router.afterEach((to,from)=>{})

• has only two parameters, to: which one to enter Route to go, 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 in the component

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

• In the Admin.vue file, when clicking to go to the admin route, execute the beforeRouteEnter function
• to, the from parameter is the same as The usage method above is the same. 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)=>{}

• Click When using other components, determine whether to confirm the departure. 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 guards

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

Related recommendations:

Summary of 2020 front-end vue interview questions (with answers)

Vue Tutorial Recommendation: The latest 5 vue.js video tutorial selections in 2020

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

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