vue路由守卫 之 内置守卫

基础知识

路由守卫：

• 有些资料上叫路由拦截
• 或者路由的钩子（函数）
• 当我进到到哪个阶段的时候会自动触发

---

举个例子

路由的守卫就相当于看门的老大爷，你进出都要检查，符合了要求才能进出

路由的三大守卫

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

初始代码

• 以下路由守卫都会按照这个代码进行编辑

初始代码：

/******************组件（我要点击后进入的页面） 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> |

此时效果是这样的：

---

1. beforeRouteEnter: 进入路由之前执行

• 进入之前进行拦截
• 没有 this
• to 进入的路由，你要进入到的哪个路由里面
• from 从哪个路由过来
• next 决定着你的走向（允不允许跳转到该路由或往下走）
• 你如果打印 to 和 from 就会展现你的路由信息

---

下面我们开始添加路由守卫 beforeRouteEnter 进入路由之前执行

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

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

• 此时就进不去那个 my 界面了
• 但是如果你写上 next（） 就会允许你进入，当然，之前会有检查你是否符合标准的代码，这里我没写，这部分代码主要是：判断是否符合，符合直接进入，不符合的话跳转到哪些页面，至于跳转的话，也用 next（），只要在里面写入你 路由 的地址就可以了

2. beforeRouteLeave:离开路由之前执行

• 离开之前进行拦截
• to 要去哪
• from 从哪里开
• next() 是没有回调函数的
• 这里面有 this 的，这个 this 指的是当前你所在的实例
• 该路由的信息未填写完整，或该路由的流程未走完，你是离不开这个页面的。（关闭浏览器不算数）

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

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

• 现在当你进入到 my ，然后离开的时候就离不开了，因为我把它拦下来了
• 怎让离开？ 只要协商 next()；就可以了，是继续执行的意思

3. beforeRouteUpdate:当路由的参数发生改变时执行

• 当路由的参数发生变化时触发
• 就是你浏览器上头的地址栏
• to:要更改的路由
• from:当前路由

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

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

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

• 现在我的地址栏内的参数时？a=2
  
• 上图我给 template 添加链接是让它自己访问自己并给自己一个值，这样就相当于变的改变了自己路由的参数，但是！ 我点击它并没有像我预想的那样改变了路由的参数
• 这是因为我的 beforeRouteUpdate 将它拦截了下来