vue route Guard's built-guard

Basics

Routing guard :

• Call routing to intercept some of the information
• Hook or routing (function)
• When I entered the stage to which the time will automatically trigger

---

for example

Routing guard is equivalent to the old man janitor, you have to check in and out, in and out of compliance with the requirements to

Three guards routing

全局守卫：
    beforeEach:   全局前置守卫
    afterEach:    全局后置守卫
    beforeResolve:全局解析守卫。
    
组件内部守卫：
    beforeRouteEnter: 进入路由之前执行
    beforeRouteUpdate:当路由的参数发生改变时执行
    beforeRouteLeave: 离开路由之前执行。
    
路由独享守卫：
    beforeEnter       进入路由之前执行。写在路由配置信息上的。

Initial code

• The following routes will be edited guards in accordance with this Code

初始代码：

/******************组件（我要点击后进入的页面） My.vue************************/

<template>
    <div>大叫好，这里是页面 my</div>
</template>

<script>
export default {
    name:"My",
}
</script>

/******************路由（对应的地址进入到对应的页面）index.js*****************/

  {
    path:"/my",
    name:"my",
    component:()=>import('../views/my')
  },

/******************App.vue*****************/

<router-link to="/my">my</router-link> |

And the effect is such that:

---

1. beforeRouteEnter: Before entering the routing execution

• Before entering the intercept
• Not this
• to enter the route, you have to enter the inside of which route
• from which come from routing
• next determines your direction (you allow to jump to the route or go down)
• If you print to and from will show your route information

---

Here we begin to add routes guards performed before entering the routing beforeRouteEnter

/******************在 my.vue里面添加************************/
<script>
export default {
    name:"my",

     beforeRouteEnter(to,from,next){
         //next();
     }
}
</script>

• At this point the interface will not get that my
• But if you write next () will allow you to enter, of course, before there will check whether you meet the criteria of the code, I did not write here, this part of the code are: to determine compliance, in line with direct access, does not comply, then jump go to the page which, as a jump, then also use next (), as long as you write inside routing address on it

2. beforeRouteLeave: Before leaving the routing execution

• Before leaving intercept
• To go to
• from where to open
• next () callback function is not
• And there are of this, this this refers to an instance where your current
• The routing information is not completed, or the routing process is not completed, you are inseparable from this page. (Close the browser does not count)

/******************在 my.vue里面添加************************/
<script>
export default {
    name:"my",

     beforeRouteLeave(to,from,next){
         //next();
     }
}
</script>

• Now when you go to my, then leave when he can not do without, because I put it stopped coming
• How to let leave? As long as negotiations next (); it is meant to continue the implementation of

3. beforeRouteUpdate: when performing routing parameters changed

• Fires when routing parameters change
• It is the top of your browser address bar
• to: the route to be changed
• from: the current routing

/******************在 my.vue里面添加************************/

//template
<router-link to="/my?id=4">Home</router-link> |
---------------------------------------------------------------------------
//script
<script>
export default {
    name:"my",

     beforeRouteUpdate(to,from,next){
         //next();
     }
}
</script>

• When the parameters of my address bar now? a = 2
  
• The figure I have to add a link to access your own template is to make it and give yourself a value, this is equivalent to change the parameters changed his route, but! I click on it and did not change the parameters of the route as I expected
• This is because my beforeRouteUpdate it blocked off