vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue路由守卫

Vue路由守卫详解

作者：内师-ZT

路由导航守卫提供了一些钩子函数,可以在路由导航过程中进行拦截和控制,其中,beforeEach 导航守卫可以在每次路由切换前被触发,本文给大家介绍Vue路由守卫详解,感兴趣的朋友一起看看吧

什么是路由守卫

路由守卫是Vue Router提供的一种机制，用于在导航过程中对路由进行控制和管理。通过使用路由守卫，你可以在路由切换前、切换后以及错误处理时执行相应的逻辑。

Vue Router提供了三种类型的路由守卫：
1、全局前置守卫
2、路由独享的守卫
3、组件内的守卫

全局前置守卫

全局前置守卫（ router.beforeEach）：这些守卫会在路由切换之前被调用，可以用来进行权限验证、登录状态检查等操作。常见的全局前置守卫有beforeEach。

语法 ：

router.beforeEach((to, from, next) => {
  // 在每次路由导航触发前执行的逻辑  
});

在router/index.js中的具体配置

// index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
  // 路由配置
  routes: [
    // ...定义路由...
  ]
});
router.beforeEach((to, from, next) => {
  // 全局前置守卫逻辑
});
export default router;

在上述示例中，我们通过 router.beforeEach 方法注册了一个全局前置守卫。在每次路由导航之前，该守卫会被调用。守卫的回调函数接收三个参数：

在守卫的回调函数中，你可以根据业务需求执行相应的操作，如验证用户权限、检查登录状态、取消导航或重定向到其他路由。next 函数用于控制导航的继续或中断。

全局前置守卫（Global before Guards）可以在以下场景中发挥作用：

路由独享的守卫

路由独享的守卫（beforeEnter）：这些守卫可以直接在路由配置中定义，只对特定的路由生效。可以在进入该路由前、离开该路由前或两者之间执行相应逻辑。常见的路由独享守卫有beforeEnter。

语法

const router = new VueRouter({
  routes: [
    {
      path: '/example',//具体跳转路径
      component: ExampleComponent,//具体跳转页面
      beforeEnter: (to, from, next) => {
        // 在单个路由的独享守卫逻辑
      }
    },
    // ...
  ]
});

在router/index.js中的具体配置

// index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  {
    path: '/example',
    component: ExampleComponent,
    beforeEnter: (to, from, next) => {
      // 在单个路由的独享守卫逻辑
    }
  },
  // ...其他路由配置...
];
const router = new VueRouter({
  routes
});
export default router;

路由独享的守卫在以下场景中非常有用：

组件内的守卫

组件内的守卫：这些守卫是直接写在组件内部的方法，用于对组件内部的路由变化做出反应。常见的组件内守卫有beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。

组件内的守卫允许你在组件内部针对组件生命周期的不同阶段执行相应的逻辑。

以下是Vue.js提供的组件内的守卫：

这些守卫可以直接定义在组件的选项中
语法

export default {
  // ...
  beforeRouteEnter(to, from, next) {
    // 在组件实例创建之前调用
    // 可以使用回调函数或返回一个Promise延迟进入
  },
  beforeRouteLeave(to, from, next) {
    // 在离开当前路由时调用
    // 可以进行确认、保存数据等操作
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由被复用时调用
    // 可以对参数的变化作出响应
  }
  // ...
}

组件内的守卫在以下场景中非常有用：

举例说明

在 Vue 开发中，你可以通过路由导航守卫来实现在未登录状态下先展示登录页面而不展示首页。

路由导航守卫提供了一些钩子函数，可以在路由导航过程中进行拦截和控制。其中，beforeEach 导航守卫可以在每次路由切换前被触发。

使用路由导航守卫来实现在未登录状态下先展示登录页面：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
// 全局的路由导航守卫
router.beforeEach((to, from, next) => {
  const isLoggedIn = checkUserLoggedIn(); // 根据实际情况判断用户是否已登录
  if (to.path !== '/login' && !isLoggedIn) {
    // 如果用户未登录且访问的不是登录页，则重定向到登录页
    next('/login');
  } else {
    // 已登录或者访问的是登录页，则正常跳转
    next();
  }
});
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

上述代码中，我们在 beforeEach 导航守卫中进行判断，如果用户未登录且访问的不是登录页（即非 /login 路径），则使用 next('/login') 将用户重定向到登录页；否则，如果用户已登录或者访问的是登录页，则继续正常跳转。

这样，在每次路由切换之前都会进行登录状态的检查，并根据检查结果来决定是否重定向到登录页。这样就可以先展示登录页而不先展示首页。

当用户访问其他需要登录才能查看的页面时，会被拦截并跳转到登录页面。用户在登录成功之后，再跳转到原本要访问的页面。

请注意，checkUserLoggedIn() 是一个自定义函数，用于实际判断用户是否已登录，请根据你的实际需求和认证逻辑来编写该函数。

到此这篇关于Vue路由守卫详解的文章就介绍到这了,更多相关Vue路由守卫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文