路由导航守卫-Toy模板网

这篇具有很好参考价值的文章主要介绍了路由导航守卫。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

路由导航守卫有哪些：

全局守卫
组件内守卫
独享守卫

1.全局守卫

beforeEach 全局前置守卫
beforeResolve 全局解析守卫
afterEach 全局后置守卫

在创建实例的过程中，我们可以定义全局守卫：

路由导航守卫,前端,javascript,vue.js

2.独享守卫

beforeEnter 就是放到routes中定义的：

const routes = [
   {
       name: 'user',
       component: User
       beforeEnter: (to, from) => {

       }
   }
]
//beforeEnter: [removeQueryParams, removeHash], 可以接受函数数组，removeQueryParams，removeHash为自定义的函数
注意点是独享守卫在路由参数改变但是路由本身地址没有变化的情况下是不会再次触发的。

3.组件内守卫

beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

beforeRouteEnter: 组件对应路由被验证前调用，不能获取组件实例this
beforeRouteUpdate：在当前组件路由改变时，但是组件本身被复用时调用。可以访问this。
beforeRouteLeave：在导航离开当前组件路由时调用，可以访问this

Vue3中setup 中调用可以通过api onBeforeRouteUpdate和onBeforeRouteLeave分别添加update和leave守卫

注意一个事情是beforeRouteEnter中如果想要拿到this实例可以通过next回调函数

beforeRouteEnter: (to, from, next) => {
   next(vm => { //这里vm相当于组件实例this，可以正常访问到组件内数据

   })
}
但是next回调被调用时已经时组件路由被读取解析并记录后才调用的，就是如果你要在回调中去重定向路由，那么你当前页面的路由也是在路由记录中的。

完整的导航解析流程：
1.已经失活的组件调用beforeRouteLeave
2.调用全局前置守卫beforeEach
3.调用复用组件的beforeRouteUpdate
4.在路由配置里调用beforeEnter
5.解析异步路由组件
6.调用被激活组件内beforeRouteEnter
7.调用全局解析守卫beforeResolve
8.导航被确认
9.调用全局后置守卫afterEach
10.触发Dom更新
12.调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入

综上所述，Vue Router中的导航守卫是非常灵活且强大的功能，我们可以使用全局守卫、路由守卫和组件内守卫，来实现各种自定义的逻辑。在日常开发中，我们可以根据具体需求，灵活运用这些守卫，以达到更好的用户体验和功能实现。

总结起来，导航守卫是Vue Router中非常重要的功能，它可以帮助我们在路由切换过程中做一些自定义的逻辑处理。通过全局守卫、路由守卫和组件内守卫，我们可以实现各种各样的功能，例如路由拦截、权限验证、路由切换动画等。在实际项目开发中，合理使用导航守卫，能够提高开发效率和用户体验。文章来源地址https://www.toymoban.com/news/detail-744385.html

到了这里，关于路由导航守卫的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！