讯享网

<p>在 Vue.js 中&#xff0c;路由守卫是用来控制页面导航行为的函数。当我们在应用中切换路由时&#xff0c;路由守卫允许我们在路由改变之前或之后执行一些特定的逻辑。比如&#xff0c;我们可以用路由守卫来检查用户是否已登录&#xff0c;是否有权限访问某个页面&#xff0c;或者在离开当前页面之前提示用户保存未完成的工作等等。</p> <p>这相当于vue中的生命周期钩子函数一样&#xff0c;在路由**作的时候&#xff0c;会逐一触发这些路由守卫。将路由跳转过程细分为每一个小过程&#xff0c;让我们能在路由跳转过程中的每个状态&#xff0c;进行一系列的操作&#xff0c;这就是路由守卫。也可以称为路由的生命周期。</p> <p>在 Vue 3 中&#xff0c;路由守卫主要分为三类&#xff1a;<strong>全局的</strong>、<strong>路由独享的</strong>、<strong>组件内的</strong>。</p> <h4 id="h2">全局守卫</h4> <p>所谓全局守卫&#xff0c;就是所有的路由组件都会对这些函数进行调用&#xff0c;当任意路由发生改变的时候&#xff0c;都会调用这三个函数</p> <h5 id="h3">全局前置守卫 (beforeEach)</h5> <p>全局前置守卫是在路由跳转之前执行的。你可以通过调用 方法注册一个或多个全局前置守卫。这些守卫会按照注册顺序依次执行&#xff0c;并且每个守卫都有机会中断导航过程。</p> <div> </div> <h5 id="h4">全局解析守卫 (beforeResolve)</h5> <p>全局解析守卫类似于前置守卫&#xff0c;但它的主要用途是在导航被确认之后&#xff0c;解析组件之前被调用。这可以用于在导航之前解析数据&#xff0c;如果不需要在导航确认之前就阻止导航&#xff0c;那么可以使用此守卫。</p> <div> </div> <h5 id="h5">全局后置守卫 (afterEach)</h5> <p>全局后置守卫会在导航完成后被调用。它们不接受 函数也不可以中断导航&#xff0c;但是可以用来做一些清理工作或者修改状态。</p> <div> </div> <h4 id="h6">路由独享守卫</h4> <p>路由独享守卫是一种特殊的导航守卫&#xff0c;它只应用于单个路由或一组路由。这种守卫可以让你在路由配置中直接定义&#xff0c;而不像全局守卫那样需要在路由器实例上注册。路由独享守卫允许你针对特定的路由实施一些逻辑&#xff0c;例如验证用户是否有权限访问某个页面。</p> <p>它与全局前置守卫中的全局前置守卫 相似&#xff0c;但它是特定于每个路由的。</p> <div> </div> <h4 id="h7">组件内守卫</h4> <p>除了全局守卫和路由独享守卫之外&#xff0c;还可以在组件内部定义守卫。组件内的守卫主要用于控制组件自身的生命周期&#xff0c;以及在组件加载或更新时执行一些特定的操作。这些守卫包括 、 和 </p> <h5 id="h8"> </h5> <p> 守卫是在组件被创建之前被调用的&#xff0c;也就是在组件实例还未创建时。因此&#xff0c;在这个守卫里不能访问到 &#xff08;即当前组件实例&#xff09;&#xff0c;因为它还未被创建。你可以传递一个回调给 函数来访问组件实例。</p> <div> </div> <h5 id="h9"> </h5> <p> 守卫会在当前路由改变&#xff0c;但是该组件被复用时调用。例如&#xff0c;对于一个带有动态参数的路径 &#xff0c;在 和 之间导航的时候&#xff0c;同一个 组件实例会被复用&#xff0c;而这个守卫就会被调用。</p> <div> </div> <h5 id="h10"></h5> <p> 守卫在导航离开该组件的对应路由时被调用。它可用于在离开路由前进行一些操作&#xff0c;比如保存用户编辑的内容或询问用户是否确定离开。</p> <div> </div> <div> </div> <p>这种情况下会出现空白页面&#xff0c;因为当你进入登录页面的时候&#xff0c;我们还是处于未登录状态&#xff0c;会出现一直循环&#xff0c;造成死循环。所以我们应该要修改一下判断条件。</p> <div> </div> <p>&#xff1a;即将要进入的目标路由对象&#xff1b;</p> <p>&#xff1a;即将要离开的路由对象&#xff1b;</p> <p>&#xff1a;涉及到next参数的钩子函数&#xff0c;必须调用next()方法来resolve这个钩子&#xff0c;否则路由会中断在这&#xff0c;不会继续往下执行</p> <ul><li>&#xff1a;进行管道中的下一个钩子。如果全部钩子执行完了&#xff0c;则导航的状态就是confirmed(确认的)。</li><li>中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)&#xff0c;那么 URL 地址会重置到from路由对应的地址。</li><li>或者&#xff1a;跳转到一个不同的地址。当前的导航被中断&#xff0c;然后进行一个新的导航。可传递的参数可以是router-link标签中的to属性参数或router.push中的选项</li><li>&#xff1a;如果传入next的参数是一个Error实例&#xff0c;则导航会被终止且该错误会被传递给router.onError()注册过的回调。</li></ul> <ol><li>导航被触发。</li><li>在离开的组件里调用  守卫。</li><li>调用全局的  守卫。</li><li>在重用的组件里调用  守卫 。</li><li>在路由配置里调用 。</li><li>解析异步路由组件。</li><li>在被激活的组件里调用 。</li><li>调用全局的  守卫 。</li><li>导航被确认。</li><li>调用全局的  钩子。</li><li>触发 DOM 更新。</li><li>调用  守卫中传给  的回调函数&#xff0c;创建好的组件实例会作为回调函数的参数传入。</li></ol> <p>路由守卫在 Vue.js 应用中是一个非常重要的工具&#xff0c;它允许我们在路由导航的各个阶段插入自定义逻辑&#xff0c;从而确保应用的安全性、数据完整性和用户体验。通过正确使用路由守卫&#xff0c;你可以轻松地实现鉴权、数据预加载、防止数据丢失等常见需求。无论是全局守卫、路由独享守卫还是组件内守卫&#xff0c;它们都为你提供了灵活而强大的导航控制能力。</p>