vue3.0 ts ElementPlus 动态路由

最新推荐文章于 2024-07-06 23:17:11 发布

高碳水饱和战士

最新推荐文章于 2024-07-06 23:17:11 发布

阅读量240

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45998637/article/details/132760494

版权

安装pinia

npm install  pinia --save

创建 menu.ts 和index.ts

在这里插入图片描述

menu.ts内容

// @src/store/menus.ts
import { defineStore } from 'pinia'
import { ref } from 'vue';

export const useMeanStore =  defineStore('mean', () => {
  // 菜单数据
  const menuList = ref([])
  // 权限数据
  const permList = ref([])
  const hasRoute = ref(false)
  function changeRouteStatus(state: any) {
    hasRoute.value = state
    sessionStorage.setItem("hasRoute", state)
  }
  function setMenuList(menus: any) {
    menuList.value = menus
  }
 function setPermList(authoritys: any) {
    permList.value = authoritys
  }
  return {
    changeRouteStatus,
    setMenuList,
    setPermList
  }
})

index.ts 内容

import { defineStore } from 'pinia'
import { type RouteRecordRaw } from 'vue-router'
import { ref } from 'vue';

// import * as RouteRecordRaw from 'vue-router'
// let modules = import.meta.glob("../views/**/*.vue")
let modules = import.meta.glob("../views/*/*.vue")
// pinia状态管理器
export const useStore = defineStore('myStore', {
    state: () => {
        return {
            // 路由表
            routes: [] as Array<RouteRecordRaw>
        }
    },
    getters: {},
    actions: {
        // 添加动态路由，并同步到状态管理器中
        addRoutes(data: Array<any>, router: any) {
            data.forEach(m => {
                this.routes.push({
                    path: m.path,
                    name: m.name,
                    component: modules[`../views/${m.component}`],
                })
            })
            this.routes.forEach(m => router.addRoute("home",m))
            console.log(router);
            
        },
    },
 
})

export const useMeanStore =  defineStore('mean', () => {
  // 菜单数据
  const menuList = ref([])
  // 权限数据
  const permList = ref([])
  const hasRoute = ref(false)
  function changeRouteStatus(state: any) {
    hasRoute.value = state
    sessionStorage.setItem("hasRoute", state)
  }
  function setMenuList(menus: any) {
    menuList.value = menus
  }
 function setPermList(authoritys: any) {
    permList.value = authoritys
  }
  return {
    menuList,
    permList,
    hasRoute,
    changeRouteStatus,
    setMenuList,
    setPermList
  }
})

在路由守卫中请求路由数据

//新建文件routerGuard
import router from "@/router/index"
import { useStore,useMeanStore } from "../stores";
import { routerApi } from '../server' //请求路由的api
// import { useMeanStore } from '@/stores/menus'
// 路由守卫
router.beforeEach((to, from, next) => {
   const useMean = useMeanStore()
   if (to.path !== '/home' && to.path !== '/') {
      const store = useStore()
      if (store.routes.length < 1) {
         routerApi().then(res => {
            useMean.setMenuList(res.data.data)
            useMean.setPermList(res.data.data)
            store.addRoutes(res.data.data, router)
            next({ path: to.path, replace: true })
         }).catch(_ => {
            next()
         })

      } else {
         next()
      }
   } else {
      next()

   }
})
router.afterEach(() => {
})

使用

import { useStore, useMeanStore } from "../stores";
import { storeToRefs } from "pinia";
const useMean = useMeanStore()
const { menuList, permList, hasRoute } = storeToRefs(useMean);