vue3+pinia动态路由

Vue3 + Pinia 结合动态路由可以让你创建更灵活的单页应用(SPA)，使得路由可以根据用户请求或者其他条件动态生成。Pinia 是 Vue 3 的官方状态管理模式，它提供了一个模块化的 store 来管理应用的状态。

以下是实现动态路由的基本步骤：

1. **安装依赖**：
安装 `vue-router` 和 `@router/store`（它是 Pinia 支持的插件），如果还没安装，可以在项目里运行：

   npm install vue-router @vue/router @pinia/router

2. **配置 Pinia Store**：
创建一个 pinia store，通常在 `store/index.js` 或者相应的模块文件中：

   import { createStore } from '@pinia/store';
   import router from './router'; // 引入动态路由模块

   export default createStore({
     id: 'router',
     plugins: [router],
     state: () => ({
       routes: [] // 初始无动态路由
     }),
     actions: {
       async fetchRoutes() {
         // 在这里获取动态路由数据，可能是从服务器 API 或者本地存储
         const dynamicRoutes = await someApiCall();
         this.$state.routes = dynamicRoutes;
       }
     },
     getters: {
       getActiveRoute() {
         // 根据当前 URL 返回匹配的路由
         return this.$state.routes.find(route => route.path === window.location.pathname);
       }
     }
   });

3. **Vue Router 配置**：
在 `main.js` 或者 `App.vue` 中设置动态路由，并在需要的地方触发路由更新：

   import { useStore } from '@pinia/runtime';
   import { useRouter } from '@vue-router';
   
   const store = useStore('router');
   const router = useRouter();

   router.onReady(() => {
     // 初始化路由数据
     store.fetchRoutes().catch((error) => console.error(error));
   });

   router.beforeEach((to, from, next) => {
     // 检查路由是否已经存在于 store 的动态路由列表中
     if (!store.getActiveRoute || store.getActiveRoute.path !== to.path) {
       // 如果不是，尝试更新 store 并导航到新的路由
       store.fetchRoutes().then(() => {
         router.push(to);
       });
     } else {
       next(); // 跳转到已知路由
     }
   });