Vue3 + Vite + Router + Pinia + Layout 实现动态路由

安装依赖

// 安装 vue-router
npm install vue-router
yarn add vue-router
// 安装 pinia
npm install pinia
yarn add pinia
// 安装 pinia 持久化插件
npm install pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate

Router

tourer 在这里就不做过多的详解，有需要的同学可以访问 Vue3使用vue-router路由 进行参考

Layout 布局

有需要的同学可以访问 Vue3 + Vite + Ts 使用 Layout 布局 进行参考

Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。想了解更多可以访问 Pinia 中文文档
Pinia 核心概念
· state 数据管理
· actions 修改状态（包括同步和异步，pinia中没有mutations）
· getters 计算属性
1，在 src 目录下新建 store 文件加，同时在 store 里新建 index.ts 文件

import { defineStore } from "pinia";

export const useStore = defineStore("myStore", {
  state: () => {
    return {};
  },
  getters: {},
  actions: {},
});

2，在 main.ts 文件中引入

import { createApp } from 'vue';
import "./style.css";
import App from './App.vue';
// 引入pinia
import { createPinia } from "pinia";
const app = createApp(App);
const pinia = createPinia();
app
  .use(pinia)
  .mount("#app");

3，在组件中使用

import useStore from '@/store/inedx.ts';
const store = useStore()

注：如果直接从pinia中解构数据，会丢失响应式， 使用storeToRefs可以保证解构出来的数据也是响应式的

import { storeToRefs } from 'pinia'
import useStore from '@/store/inedx.ts';
const store = useStore()
// 对象赋值
const { } = storeToRefs(store)

Pinia 持久化插件的使用

在 main.ts 文件中引入

// pinia持久化插件
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate)

import { defineStore } from "pinia";

export const useStore = defineStore("myStore", {
  // 开启数据持久化
  persist: true,
  state: () => {
    return {};
  },
  getters: {},
  actions: {},
});

获取路由数据

// routerData 路由数据
store.addRouter(routerData);

添加路由，并同步到状态管理器中

import { defineStore } from "pinia";
import utils from "@/utils/utils.ts";

export const useStore = defineStore("myStore", {
  // 开启数据持久化
  persist: true,
  state: () => {
    return {
      // 路由数据
      routes: [],
    };
  },
  getters: {},
  actions: {
    /**
    * 同步到状态管理器中
    * _getViews 是封装好的方法 目前只兼容二级路由
    */
    addRouter(list: any) {
      list.map((item: any) => {
        if (item.url) {
          item.component = utils._getViews(`${item.url}`, "one");
        }
        if (item.children) {
          item.children.map((items: any) => {
            items.component = utils._getViews(`${items.url}`, "tow");
          });
        }
      });
      this.routes = list;
    },
  },
});
/**
 * _getViews 方法
 * @param view 路径
 * @param type 路由层数 目前只兼容二级路由
 */
const _getViews = (view: any, type: any) => {
  let res;
  let modules: any;
  if (type == "one") {
    modules = import.meta.glob("../view/*.vue");
  } else {
    modules = import.meta.glob("../view/**/index.vue");
  }
  for (const path in modules) {
    const dir =
      type == "one"
        ? path.split("view")[1].split(".vue")[0]
        : path.split("view/")[1].split("/index.vue")[0];
    if (dir === view) {
      res = () => modules[path]();
    }
  }
  return res;
};

在 Router 中添加路由

1，此时，在 router 中引同 store 文件会报错。原因：是 Pinia 在 main.ts 中还未注册好，便在其他文件中使用了它。

2，解决方法
在 store 目录中单独创建一个 store.ts 文件

import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;

在 main.ts 文件中引入

import pinia from "@/store/store.ts";
app.use(pinia)

3，在 router 文件中使用

import pinia from "@/store/store";
import { useStore } from "@/store/index.ts";
const store = useStore(pinia);
console.log(store);

添加路由

如不需要 Layout 布局，直接在数组后面添加即可

// 路由数据
let routes = [{
    path: "/",
    redirect: "/login",
  },
  {
    id: "2",
    path: "/login",
    name: "login",
    hidden: true,
    component: () => import("@/view/login.vue"),
  },
  ...store.route
];

下面是 Layout 完整代码

// 引入路由
import { createRouter, createWebHistory } from "vue-router";
import layout from "@/layout/index.vue";
import { routerData } from "@/utils/router.ts";
import pinia from "@/store/store";
import { useStore } from "@/store/index.ts";

const store = useStore(pinia);
store.addRouter(routerData);
// 路由数据
let routes = [
  /**
   * redirect 默认路由:进入项目 默认进入 /index 页面
   * hidden 是否在路由栏显示
   * meta : {
      noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
      title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
      icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
      breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
      activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
    }
   */
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/index",
    id: "1",
    component: layout,
    children: [...store.route],
  },
  {
    id: "2",
    path: "/login",
    name: "login",
    hidden: true,
    component: () => import("@/view/login.vue"),
  },
];
// 路由
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 导出
export default router;

效果图

仓库地址

https://gitee.com/luliangweb/admin-template