vue路由守卫的几种方法（vue-router路由守卫）

科技前沿 • 2025-06-03 23:36 • 阅读 28

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

const Foo = { template: ..., beforeRouteEnter (to, from, next) {

讯享网

讯享网</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 在渲染该组件的对应路由被 confirm 前调用</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不！能！获取组件实例 `this`</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 因为当守卫执行前，组件实例还没被创建</span> next(vm =&gt;<span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 通过 `vm` 访问组件实例</span>

}) }, beforeRouteUpdate (to, from, next) {

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 在当前路由改变，但是该组件被复用时调用</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 可以访问组件实例 `this`</span>

}, beforeRouteLeave (to, from, next) {

讯享网</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 导航离开该组件的对应路由时调用</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 可以访问组件实例 `this`</span>

} }

vue路由守卫的几种方法（vue-router路由守卫）

相关推荐