vue的路由守卫有哪些钩子函数（vue中的路由守卫）

大家好，我是讯享网，很高兴认识大家。

  <?xml encoding="utf-8" ?><html><body><blockquote><p>vue路由钩子函数有2种，分别为：1、全局守卫（全局钩子函数），指的是“index.js”中的router对象；2、路由守卫（针对单个路由钩子函数）；3、组件守卫（组件级钩子函数），是定义在路由组件内部的守卫。</p></blockquote><p><img src="https://img.php.cn/upload/article/202110/27/2021102717463957213.jpg"></p><p>本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。</p><p> 的 <strong>钩子函数</strong> ，其实说的就是 <strong>导航守卫</strong> 。</p><p>引用官网的话</p><blockquote><p>“<strong>导航</strong>” 表示路由正在发生改变。</p></blockquote><blockquote><p> 提供的导航守卫主要用来通过 <strong>跳转</strong> 或 <strong>取消</strong> 的方式 <strong>守卫导航</strong> 。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。</p></blockquote><p>也就是：<strong>全局守卫（全局钩子函数）</strong>、<strong>路由守卫（针对单个路由钩子函数）</strong>、<strong>组件守卫（组件级钩子函数）</strong>。</p><p>先简单搭建一下环境</p><p><strong>index.js</strong></p><p><strong>main.js</strong></p><p><strong>页面A</strong></p><p><strong>页面B</strong></p><p><strong>页面C</strong></p><p><strong>通用组件</strong></p><p>当前页面是这样的，有点丑，凑活看吧，咱也不是来学习  的</p><p><img src="https://img.php.cn/upload/article/000/000/024/bd5fe4bf4afd1f66bd62245150428832-1.gif" alt="动画.gif"></p><p>顾名思义，是要定义在全局的，也就是我们  中的  对象。</p><p>全局前置守卫，在路由跳转前触发，它在 <strong>每次导航</strong> 时都会触发。</p><p>通过  注册一个全局前置守卫。</p><p><img src="https://img.php.cn/upload/image/369/471/864/1635327838836345.png" title="1635327838836345.png" alt="1.png"></p><p> 全局前置守卫接收三个参数</p><ul><li><strong>to: Route</strong>: 即将要进入的目标路由对象</li><li><strong>from: Route</strong>: 当前导航正要离开的路由对象</li><li><strong>next: Function</strong>: 一定要调用该方法不然会阻塞路由。</li></ul><p><strong>注意：</strong>  参数可以不添加，但是一旦添加，则必须调用一次，否则路由跳转等会停止。</p><p>方法的几种情况</p><ul><li><strong>next():</strong> 进行管道中的下一个钩子。</li><li><strong>next(false):</strong> 中断当前的导航。回到  路由对应的地址。</li><li><strong>next(’/’) 或者 next({ path: ‘/’ }):</strong> 跳转到一个不同的地址，可传递的参数与  中选项一致。</li><li><strong>next(error):</strong> 导航终止，且该错误会被传递给  注册过的回调。</li></ul><p>我们把前两个参数打印出来看一下，里面包含路径，参数，元信息等内容。</p><p><img src="https://img.php.cn/upload/article/000/000/024/f23dd30e4a60a29ee39f06a2fd4a146c-2.png" alt="image.png"></p><ul><li><strong>false</strong>：取消当前的导航。</li><li><strong>null，undefined，true或者直接return</strong>：调用下一个导航守卫。</li></ul><p>全局前置守卫可以定义多个，根据创建顺序调用。在所有守卫完成之前导航一直处于等待中。</p><p>下面这个例子中我们就定义了两个  全局前置守卫。可以看到，只有在两秒以后分别打印出两条日志后才进行页面的跳转。</p><p><img src="https://img.php.cn/upload/image/683/516/504/1635327858386286.png" title="1635327858386286.png" alt="2.png"></p><p><img src="https://img.php.cn/upload/article/000/000/024/5779a081ea5c542981df636dc7b46a93-3.gif" alt="2.gif"></p><p>除了  全局前置守卫之外，其他的全局守卫都可以定义多个，并且在所有守卫完成之前导航一直处于等待中，其他的钩子函数就不进行演示了。</p><p>全局解析守卫，在路由跳转前，所有 <strong>组件内守卫</strong> 和 <strong>异步路由组件</strong> 被解析之后触发，它同样在 <strong>每次导航</strong> 时都会触发。</p><p>通过  注册一个全局解析守卫。</p><p>回调参数，返回值和  一样。也可以定义多个全局解析守卫。</p><p>全局后置钩子，它发生在路由跳转完成后， 和  之后，（组件内守卫）之前。它同样在 <strong>每次导航</strong> 时都会触发。</p><p>通过  注册一个全局后置钩子。</p><p><img src="https://img.php.cn/upload/image/735/154/344/1635327890456498.png" title="1635327890456498.png" alt="3.png"></p><p>这个钩子的两个参数和  中的  和  一样。然而和其它全局钩子不同的是，这些钩子不会接受  函数，也不会改变导航本身。</p><p>顾名思义，就是跟路由相关的钩子，我们的路由守卫只有一个，就是 。</p><p>需要在路由配置上定义  守卫，此守卫只在进入路由时触发，在  之后紧随执行，不会在 、 或  改变时触发。</p><p><img src="https://img.php.cn/upload/image/683/263/609/1635327908381630.png" title="1635327908381630.png" alt="4.png"></p><p> 路由守卫的参数是 、、 ，同  一样。</p><p>顾名思义，是定义在路由组件内部的守卫。</p><p><img src="https://img.php.cn/upload/image/237/384/266/1635327927602666.png" title="1635327927602666.png" alt="5.png"></p><p>路由进入组件之前调用，该钩子在全局守卫  和路由守卫  之后，全局  和全局  之前调用。</p><p>参数包括 ，，。</p><p>该守卫内访问不到组件的实例，也就是  为 ，也就是他在  生命周期前触发。</p><p><img src="https://img.php.cn/upload/image/171/728/859/1635327952818486.png" title="1635327952818486.png" alt="6.png"></p><p>对于  来说， 已经可用了，所以给  传递回调就没有必要了。</p><p><img src="https://img.php.cn/upload/image/875/218/947/1635327972795854.png" title="1635327972795854.png" alt="7.png"></p><p>对于  来说， 已经可用了，所以给  传递回调就没有必要了。</p><blockquote><ol><li>导航被触发。</li><li>在失活的组件里调用  守卫。</li><li>调用全局的  守卫。</li><li>在重用的组件里调用  守卫。</li><li>在路由配置里调用 。</li><li>解析异步路由组件。</li><li>在被激活的组件里调用 。</li><li>调用全局的  守卫。</li><li>导航被确认。</li><li>调用全局的  钩子。</li><li>触发  更新。</li><li>调用  守卫中传给  的回调函数，创建好的组件实例会作为回调函数的参数传入。</li></ol></blockquote><p>上面是官方给出的答案，现在我们用流程图来直观的展示一下。</p><p><img src="https://img.php.cn/upload/article/000/000/024/5779a081ea5c542981df636dc7b46a93-4.png" alt="未命名文件.png"></p><p>相关推荐：《vue.js教程》</p></body></html>

讯享网

前端入门到VUE实战笔记：立即学习

讯享网 <br>>在学习笔记中，你将探索 前端 的入门与实战技巧！</p></blockquote>