6 种 Vue 权限路由实现方式总结(最全)_vue路由form

在Vue应用中，实现基于权限的路由可以通过多种方式来实现，以下是六种常见的方法：

1. 全局前置守卫（router.beforeEach）
2. 路由元信息
3. 动态路由配置
4. 组合式API useRoutes
5. 导航守卫（beforeEnter）
6. 权限组件

以下是每种方法的简要描述和示例代码：

1. 全局前置守卫（router.beforeEach）:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ path: '/login', query: { redirect: to.fullPath } })
  } else {
    next()
  }
})

2. 路由元信息:

const router = createRouter({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requiresAuth: true },
      children: [
        {
          path: 'users',
          component: UsersComponent,
          // 更多子路由
        },
        // 更多子路由
      ],
    },
    // 更多路由
  ],
})

3. 动态路由配置:

const router = createRouter({
  routes: [
    {
      path: '/',
      component: HomeComponent,
      children: [
        {
          path: 'user',
          component: UserComponent,
          meta: { requiresAuth: true },
        },
        // 更多子路由
      ],
    },
    // 更多路由
  ],
})

4. 组合式API useRoutes:

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage, meta: { requiresAuth: true } },
  // 更多路由
]
 
const router = useRoutes(routes)

5. 导航守卫（beforeEnter）:

const router = createRouter({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      beforeEnter: (to, from, next) => {
        if (!isAuthenticated) next('/login')
        else next()
      },
      children: [
        // 子路由
      ],
    },
    // 更多路由
  ],
})

6. 权限组件:

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
 
const store = useStore()
const userRoles = computed(() => store.state.user.roles)
</script>
 
<template>
  <div v-if="userRoles.includes('admin')">
    <AdminComponent />
  </div>
</template>

这些方法可以根据应用的具体需求和规模进行选择。权限路由的实现通常涉及用户的身份验证和授权信息，因此与后端服务的集成也是必不可少的。