vue路由处理

npm install -g @vue/cli

vue create vue3-dynamic-routing

cd vue3-dynamic-routing```

npm install vue-router@next vuex@next

 我们先定义一个简单的权限模型，以便后续使用。

 在实际应用中，权限模型会更加复杂，我们可以根据实际需求进行扩展

```javascript
// src/store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    user: {
      name: 'admin', 
      roles: ['admin']  // 假设当前用户角色为admin
    },
    // 定义所有的权限路由，可以根据需求扩展
    routes: [
      {
        path: '/admin',
        name: 'Admin',
        component: () => import('@/views/Admin.vue'),
        meta: {
          roles: ['admin']
        }
      },
      {
        path: '/user',
        name: 'User',
        component: () => import('@/views/User.vue'),
        meta: {
          roles: ['user', 'admin']
        }
      },
      {
        path: '/public',
        name: 'Public',
        component: () => import('@/views/Public.vue'),
        meta: {
          roles: ['guest', 'user', 'admin']
        }
      }
    ],
    dynamicRoutes: []
  },
  mutations: {
    setDynamicRoutes(state, routes) {
      state.dynamicRoutes = routes;
    }
  },
  actions: {
    generateRoutes({ commit, state }) {
      let accessedRoutes = [];
      state.routes.forEach(route => {
        if (route.meta.roles.some(role => state.user.roles.includes(role))) {
          accessedRoutes.push(route);
        }
      });

      commit('setDynamicRoutes', accessedRoutes);
    }
  }
});

export default store;

在这段代码中，`state.user.roles`保存了当前用户的角色，`state.routes`定义了所有的权限路由。

`generateRoutes`方法根据用户角色过滤出用户有权限访问的路由，并保存到`state.dynamicRoutes`中。

 接下来权限路由动态加载到Vue Router中。

```javascript
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import store from '@/store';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

// 在导航守卫中动态添加路由
router.beforeEach(async (to, from, next) => {
  if (!store.state.dynamicRoutes.length) {
    await store.dispatch('generateRoutes');
    store.state.dynamicRoutes.forEach(route => {
      router.addRoute(route);
    });
    // 重定向到当前访问路由，以确保动态添加的路由生效
    return next({ ...to, replace: true });
  }
  next();
});

export default router;
```
在这段代码中，我们首先定义了一些固定的基础路由，然后在`beforeEach`导航守卫中动态的将权限路由添加到Vue Router实例中。

如果`state.dynamicRoutes`为空，则说明权限路由还没有生成，我们调用`generateRoutes`方法来生成，并将其添加到路由中。