DAY20240913 VUE:深入解析 Vue Router 局部路由守卫：路由独享与组件内部守卫的妙用与区别

一、书接上文 全局路由守卫

书接上文，上文讲到了全局路由守卫，我们从官网上可以看到，这里用到了query。query是干啥的呢?假设你想要在用户未登录时重定向到登录页面，并在登录后将用户引导回他们之前请求的页面,这时候就需要query登场了。

获取query字段

示例中query里的属性名redirect是随便起的，也可以写成aaa，目的是记住本来要跳哪个界面后被强迫带到Login页面来了

跳转到当时想跳的页面去

获取完query字段后，发现里面有一个redirect属性，里面包含了一个地址。此时我们跳转到那个地址，就可以从登陆页面去到我们本来要去的地方，此时因为有了token，那个本来我们要去的地方就能通过了。line19

此时用户交互体验变得更好。

二、路由独享的守卫

把beforeEnter写在某个路由配置的里面去。在 Vue Router 中，每个路由都可以定义自己的“路由独享守卫”（Route-Specific Guard）。beforeEnter 就是一个用于特定路由的守卫，它只在该路由被访问时触发，而不会在其他路由访问时触发。通过在路由配置中定义 beforeEnter，可以实现当用户进入该页面时进行拦截或其他逻辑处理。如果你希望在某个特定的页面路由上使用 beforeEnter 守卫，可以直接在该路由配置项index.js中编写逻辑。

只要一进这个页面就不放行，就拦截。如图Index.js文件

可以同时使用全局守卫和路由独享守卫，它们的执行顺序是先全局守卫，再路由独享守卫。
这种组合方式可以灵活地控制导航行为，例如全局守卫用于通用的身份验证，路由独享守卫用于特定页面的特殊逻辑控制。

三、组件内部的守卫

路由的生命周期，一进到center里面，就进行拦截。

说法：守卫、拦截都是一样的。

四、路由独享的守卫、组件内部的守卫两者区别

组件内部的守卫和路由独享的守卫的区别主要在于它们的定义位置和触发时机：

组件内部的守卫：定义在 Vue 组件内部，如 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。这些守卫在组件的生命周期中触发，用于处理与该组件实例相关的路由变化。例如，当组件即将挂载、更新或离开时，这些守卫会被调用，适合处理组件内的逻辑，如数据加载或清理操作。

路由独享的守卫：定义在路由配置中，如 beforeEnter。这些守卫在路由匹配成功后、导航进入目标路由之前触发，适用于在进入特定路由时执行一些全局的逻辑，如权限检查、重定向或预处理数据。它们不依赖于具体的组件实例。

总结：组件内部守卫更关注组件的生命周期和内部逻辑，而路由独享守卫更关注全局路由匹配和导航控制

五、参考

【1】 https://b23.tv/Hhfpaz2