vite实现动态路由简易版

1.登录界面点击登录从后端返回数据（这里使用mock模拟后端情况）。

<template>
  <div @click="bb">登录</div>
</template>
<script setup lang="ts">
import { routerRequest } from '../apis/api/getRouter.ts'
import { useRouter } from 'vue-router'

import { useCounterStore } from '../stores/counter'
const router = useRouter()

const store = useCounterStore()
const bb = () => {
  routerRequest({}).then((res: any) => {
   localStorage.setItem('router', JSON.stringify(res))
    store.getRouters(res)
    router.push('/Home')
  })
}
</script>

2.在pinia文件里面使用的函数routerRouters,注意component里面必须要是有modules导入文件，不然查找不了。这里使用的是回调，有子路由的会循环调用。(最后调用getRouters打印看看路由情况)

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
let modules = import.meta.glob("../views/*.vue");
import router from '@/router'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  const getRouters = (data: any) => {
    const routes: any[] = [];

    const processRoute = (route: any) => {
      const { path, name, component, children } = route;
      const processedRoute = {
        path,
        name,
        component: modules[`../views/${component}.vue`],
        children: children ? children.map((child: any) => processRoute(child)) : []
      };
      return processedRoute;
    };

    routes.push(processRoute(data));
    routes.forEach(m => router.addRoute(m))
    console.log(router.getRoutes());

  };

  return { count, doubleCount, increment, getRouters }
})

3.最后在路由文件里面做一些处理，注释的模块为后端返回的json数据，一般会在路由前置守卫里面做权限处理，包括token权限，每次路由跳转之前请求后端数据，使用addRouter方法添加路由进路由表里。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NotFound from '../views/404.vue'
import Login from '../views/Login.vue'
import myGuard from './router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login,

    },
    // {
    //   path: '/Home',
    //   name: 'home',
    //   component: HomeView,
    //   children: [
    //     {
    //       path: '/First',
    //       name: 'first',
    //       children: [
    //         {
    //           path: '/FirstChild',
    //           name: 'firstChild',
    //           component: () => import('../views/FristChild.vue'),
    //         },
    //         {
    //           path: '/FirstGround',
    //           name: 'firstGround',
    //           component: () => import('../views/FirstGround.vue'),
    //         },
    //       ]
    //     },
    //     {
    //       path: '/Secound',
    //       name: 'secound',
    //       component: () => import('../views/Secound.vue')
    //     },
    //   ]
    // },
    {
      path: '/:catchAll(.*)', // 通配符路由，匹配所有路径
      name: 'NotFound',
      component: NotFound
    }
  ]
})
router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    console.log('login');

    next()
  } else {
    if (localStorage.getItem('router')) {

      next()
    } else {
      //如果没有路由信息就跳转到登录页面重新获取路由信息
      console.log('没有路由信息就跳转到登录页面');
      next({ path: '/', replace: true })
    }
    // next()
  }
});
export default router