导航守卫vue什么时候执行 • Worktile社区

worktile

Worktile官方账号

导航守卫是Vue中用来控制路由跳转的一种机制，其中包括全局前置守卫、路由独享的守卫和组件内的守卫。不同的守卫在不同的时间点执行，用来实现不同的功能。

全局前置守卫（beforeEach）：
全局前置守卫在路由跳转之前执行，无论是通过编程式导航还是通过点击路由链接进行跳转，都会先执行全局前置守卫。它常用于检查用户是否登录或者判断用户是否有权限访问某个页面。全局前置守卫可以通过Vue Router的实例调用beforeEach方法来添加，它会在每次路由跳转前都执行。
路由独享的守卫（beforeEnter）：
路由独享的守卫可以通过在路由配置中定义beforeEnter函数来实现。它只作用于某个特定的路由，在该路由跳转之前执行。路由独享守卫常用于在进入某个路由之前进行一些特定的逻辑判断或操作。
组件内的守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：
组件内的守卫是通过在Vue组件中定义beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave方法来实现。这些方法只有在组件被创建、更新或销毁时才会触发。

beforeRouteEnter：在进入该组件的路由之前执行，但是此时组件实例还未被创建，无法访问组件实例的this。
beforeRouteUpdate：在当前路由改变，但是该组件被复用时执行。可以通过进行一些条件判断，来决定是否需要重新渲染组件。
beforeRouteLeave：在离开该组件的路由之前执行，可以用来做一些离开前的确认操作或保存数据的操作。

综上所述，导航守卫的执行时间点可以根据具体的需求来选择合适的守卫进行配置，以实现相应的功能。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue的导航守卫是一种机制，用于在路由发生变化时对路由进行控制和过滤。Vue的导航守卫分为全局守卫、路由守卫和组件守卫三种类型。

全局守卫：全局守卫是指在整个应用程序中都会执行的守卫。它包括三个事件：beforeEach、afterEach和beforeResolve。beforeEach会在路由切换之前执行，可以用来做一些全局的权限验证或登录状态的判断。afterEach会在路由切换之后执行，可以用来做一些路由切换后的操作，比如页面的滚动。beforeResolve会在导航被确认之前执行，可以用来处理异步路由导航。
路由守卫：路由守卫是指在特定路由上进行的守卫。它包括三个事件：beforeEnter、beforeRouteUpdate和beforeRouteLeave。beforeEnter会在进入某个路由之前执行，可以用来对该路由进行权限验证。beforeRouteUpdate会在当前路由复用，但参数发生变化时执行，可以用来监听参数的变化并进行相应的逻辑处理。beforeRouteLeave会在离开当前路由之前执行，可以用来做一些页面离开前的数据保存或确认操作。
组件守卫：组件守卫是指在组件实例上进行的守卫。它包括两个事件：beforeRouteEnter和beforeRouteUpdate。beforeRouteEnter会在进入组件之前执行，但此时组件实例还没有创建，因此无法通过this访问组件的实例。可以利用这个守卫执行一些异步逻辑，然后传递给next回调函数，创建组件实例并传入所需的数据。beforeRouteUpdate会在组件复用时执行，并且可以访问组件的this实例。

综上所述，Vue的导航守卫会在不同的时机执行，可以用来对路由进行全局或局部的控制和过滤。它可以帮助开发者在路由切换时进行一些额外的逻辑处理，提高应用程序的用户体验。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

导航守卫是Vue.js中的一个重要概念，用于控制页面的跳转和访问权限。导航守卫分为全局守卫、路由独享守卫和组件守卫，它们都可以用来执行一些逻辑操作，例如验证用户权限、登录验证、记录访问日志等。

全局守卫
全局守卫会在路由切换时，无论是从哪个路由跳转到另一个路由，都会先执行全局守卫的逻辑。可以在创建Vue实例之前通过Vue的beforeCreate生命周期钩子函数，或者通过router.beforeEach方法进行全局守卫的设置。

// 在创建Vue实例之前的全局守卫
new Vue({
  router,
  beforeCreate() {
    // 执行全局守卫的逻辑
  },
  render: h => h(App)
}).$mount('#app')

// router.beforeEach方法设置全局守卫
router.beforeEach((to, from, next) => {
  // 执行全局守卫的逻辑
  next()
})

路由独享守卫
路由独享守卫只会在该路由的切换时执行，不会对其他路由产生影响。可以通过在定义路由时使用beforeEnter字段来设置路由独享守卫。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      beforeEnter(to, from, next) {
        // 执行路由独享守卫的逻辑
        next()
      }
    }
  ]
})

组件守卫
组件守卫是在某个组件被创建、销毁或切换时执行的。Vue提供了多个与组件生命周期相关的守卫钩子函数，例如beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。

const Foo = {
  template: '<div>foo</div>',
  beforeRouteEnter(to, from, next) {
    // 执行组件守卫的逻辑
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 执行组件守卫的逻辑
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 执行组件守卫的逻辑
    next()
  }
}

总结：
导航守卫在Vue.js中的执行顺序是：全局守卫 -> 路由独享守卫 -> 组件守卫。当路由切换或组件被访问时，Vue.js会按照定义的守卫顺序依次执行相应的逻辑。导航守卫是一个非常灵活而强大的特性，可以用来控制页面的跳转和访问权限，同时也可以执行其他自定义的逻辑操作。

1年前 0条评论