vue3_admin/src/App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
  import { RouterView, useRouter, useRoute } from 'vue-router';
  import { AppRoute, NotFoundRoute } from '@/router/base';
  import { authRoutes } from '@/router/auth';
  import { filterAuthHandle } from '@/router/utils'
  import { AppStore } from '@/store/modules/app';

  const router = useRouter()
  const route = useRoute()
  const store = AppStore()

  // TODO: 增加无需权限时的判断
  // 此处模拟接口请求获取权限列表
  setTimeout(() => {
    const authFilterRoutes = filterAuthHandle([1], authRoutes)
    console.log(authFilterRoutes);
    const childrenRoutes = [...authFilterRoutes, ...AppRoute.children as []]
    router.removeRoute(AppRoute.name as string)
    router.addRoute({
      ...AppRoute,
      children: childrenRoutes
    })
    router.addRoute(NotFoundRoute)
    store.updateLoading(false)
    store.updateAuthRoutes(authFilterRoutes)
    router.replace(route.fullPath)
  }, 2e3);
</script>

<template>
  <init-loading>
    <RouterView />
  </init-loading>
</template>

<style lang="less">
// @import './style/ant-design/index.less';
</style>
<style>
@import './style/index.css';
@import './style/global.css';
</style>