vue路由處理

热心市民~菜先生發表於2024-07-28
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`方法來生成，並將其新增到路由中。






 


 




 






相關文章