vue3根据后台的地址动态显示路由

1.router.js 正常路由那种写法， 我这里路由是放在index的子路由里了

import { createRouter, createWebHashHistory } from "vue-router"
export const constRoutes = [
  {
    path: '/',
    name: 'index',
    meta: {
      title: "首页"
    },
    component: () => import('@/views/index/index.vue'),
    children: [],
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/LoginPage/loginPage.vue')
  },
  {
    path: '/test',
    name: '测试',
    component: () => import('@/views/test.vue')
  }
]

export const router = createRouter({
  history: createWebHashHistory(),
  routes: constRoutes
})

export default router

2.在router目录下新建map.js,将后台传的地址改成前端能识别的

let map = new Map();
map.set("configManagement", ()=>import('@/views/configManagement/IndexHome.vue')) //管理
let actionRouter = []
menus.map(item => {
      let component=item.accessUrl.replace("/","")
      actionRouter.push({
          path: item.accessUrl,
            name: item.name,
            component:map.get(component),
            meta: {
              title: item.name,
              icon: require("@/assets/icons/homeIcon.png"),
            },
            children: []
        })
    })
    return actionRouter;
}

3.登录后生成路由

                    let arr = getRouters($store.state.menu); 
                    $store.commit("routerArr",arr) //这里保存处理好的路由，用来生成左侧菜单栏
                    arr.forEach((item) => {
                        router.addRoute('index',item);
                    });

4.在app.vue里放置路由守卫，放置刷新后屏幕变白

   const method = {
            reloadRoute() {
                console.log($store.state.menu.length)
                if ($store.state.menu.length > 0) {
                    let arr = getRouters($store.state.menu);
                    arr.forEach((item) => {
                        router.addRoute("index", item);
                    });
                    router.push({   //这里因为访问的是子路由，不这么写找不到子路由的父级
                        path: "/",
                    });
                } else {
                    router.push({
                        path: "/login",
                    });
                }
            },
        };
        onBeforeMount(() => {
            method.reloadRoute();
        });