vue 导航守卫如何用

在 Vue.js 中使用导航守卫可以通过以下 3 种方式实现：1、全局导航守卫，2、路由独享守卫，3、组件内守卫。这些守卫可以帮助开发者在用户导航到不同路由时执行特定的逻辑，比如认证检查、数据预加载等。接下来，我们将详细介绍这三种导航守卫的用法及其具体应用场景。

一、全局导航守卫

全局导航守卫用于监听和控制全局的路由变化。在 Vue Router 中，可以通过 router.beforeEach 和 router.afterEach 来实现全局导航守卫。

1. beforeEach 守卫

beforeEach 守卫会在每次路由变化之前执行，可以用来做权限验证、重定向等操作。

const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {
  // 1. 检查用户是否已登录
  if (to.meta.requiresAuth && !isLoggedIn()) {
    // 2. 如果未登录，重定向到登录页面
    next({ path: '/login' });
  } else {
    // 3. 如果已登录，继续导航
    next();
  }
});

2. afterEach 守卫

afterEach 守卫在每次路由变化后执行，通常用于进行一些页面统计、日志记录等操作。

router.afterEach((to, from) => {

  // 记录页面访问
  logPageView(to.fullPath);
});

二、路由独享守卫

路由独享守卫是为特定路由设置的守卫，它们仅在进入该路由时触发。可以通过在路由配置中添加 beforeEnter 属性来实现。

const router = new VueRouter({

  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        // 1. 检查用户角色
        if (userHasAccess(to.meta.roles)) {
          // 2. 如果有权限，继续导航
          next();
        } else {
          // 3. 如果没有权限，重定向到403页面
          next({ path: '/403' });
        }
      },
    },
  ],
});

三、组件内守卫

组件内守卫是定义在 Vue 组件内部的守卫，它们可以控制进入、更新和离开该组件的行为。可以通过 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 等生命周期钩子来实现。

1. beforeRouteEnter

在组件被渲染之前调用，不能访问 this，因为组件还没被创建。

export default {

  name: 'MyComponent',
  beforeRouteEnter(to, from, next) {
    // 1. 执行异步操作
    fetchData(to.params.id).then(data => {
      // 2. 传递数据给组件实例
      next(vm => {
        vm.setData(data);
      });
    });
  },
};

2. beforeRouteUpdate

在当前路由改变，但是该组件被复用时调用。可以访问 this。

export default {

  name: 'MyComponent',
  beforeRouteUpdate(to, from, next) {
    // 1. 检查路由参数
    if (to.params.id !== this.$route.params.id) {
      // 2. 更新组件数据
      this.fetchData(to.params.id);
    }
    next();
  },
};

3. beforeRouteLeave

在导航离开当前路由时调用。可以访问 this。

export default {

  name: 'MyComponent',
  beforeRouteLeave(to, from, next) {
    // 1. 检查未保存的更改
    if (this.hasUnsavedChanges()) {
      // 2. 提示用户确认
      const answer = window.confirm('你有未保存的更改，确定要离开吗？');
      if (!answer) {
        next(false);
      } else {
        next();
      }
    } else {
      next();
    }
  },
};

总结

导航守卫在 Vue.js 应用中扮演着至关重要的角色，它们可以帮助我们管理复杂的导航逻辑和用户权限。通过全局导航守卫、路由独享守卫和组件内守卫，我们可以在不同的层级实现导航控制，确保应用的安全性和数据的完整性。

为了更好地利用导航守卫，建议在开发过程中：

1. 明确每个守卫的应用场景：全局守卫适用于通用的验证和日志记录，路由独享守卫适用于特定路由的权限控制，组件内守卫适用于组件级别的逻辑处理。
2. 保持守卫逻辑简洁：尽量在守卫中只执行必要的逻辑，避免复杂的操作，以提高代码的可维护性。
3. 结合异步操作：在守卫中处理异步操作时，确保正确地处理 Promise 和回调，以避免导航过程中的错误。

通过合理使用导航守卫，开发者可以打造更安全、更高效的 Vue.js 应用。

相关问答FAQs：

1. 什么是Vue导航守卫？
Vue导航守卫是Vue.js提供的一种机制，用于控制路由跳转时的行为。它允许开发者在路由跳转前、跳转后或在跳转过程中进行一些自定义的操作，例如验证用户权限、处理未保存的表单数据等。

2. 如何使用Vue导航守卫？
Vue导航守卫是通过在Vue Router中定义路由守卫函数来实现的。Vue Router提供了以下几个守卫函数：

• beforeEach: 在每个路由跳转之前调用，可以用于全局的前置守卫逻辑。
• afterEach: 在每个路由跳转之后调用，可以用于全局的后置守卫逻辑。
• beforeRouteEnter: 在进入路由之前调用，可以用于获取组件实例之前的数据。
• beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用。
• beforeRouteLeave: 在离开当前路由之前调用，可以用于确认是否离开当前页面。

通过在Vue Router的配置中使用这些守卫函数，可以对路由跳转进行控制和定制化。

3. 示例：如何使用Vue导航守卫实现权限控制？
假设我们的应用有两个路由：/admin和/login，其中/admin需要登录后才能访问。我们可以使用beforeEach守卫函数来实现权限控制：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/admin', component: AdminComponent },
    { path: '/login', component: LoginComponent }
  ]
})

router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  const isLoggedIn = checkUserLoggedIn()

  // 如果用户已登录，允许访问admin页面，否则跳转到登录页面
  if (to.path === '/admin' && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上面的代码中，我们在beforeEach守卫函数中检查用户是否已登录，如果用户已登录，则允许访问/admin路由，否则将用户重定向到/login路由。

这只是一个简单的示例，实际应用中可能需要更复杂的逻辑来实现精细的权限控制。但通过Vue导航守卫，我们可以方便地进行路由跳转的控制和定制化。