Interface return data format:

1. Configure router.ts in the routing file

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'; import { App } from 'vue' import { createRouterGuards } from "./router-guards" export const indexChildRoutes = [ { path: '/home', name: 'home', hidden: false, meta: {title:' home', hidden: false, icon: 'icon-menu_HOME'}, Component: () => import(/* @vite-ignore */`../views/home/index`) } ] export const routes: RouteRecordRaw[] = [ { path: '/login', name: 'Login', component: () => import("../views/LoginIndex.vue") }, { path: '/', name: 'sysjindex', component: () => import('../layouts/BasicLayoutIndex.vue'), redirect: '/home', children: [] }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export function setupRouter(app: App) { createRouterGuards(router, routes) app.use(router) } export default router; {setupRouter} from './router'; // // Mount route // setupRouter(app) // Mount app instance // router.isReady().then(() => app.mount('#app'))Copy the code

/router-guards configures dynamic routes

import { Router } from "vue-router" import store from ".. /store" const whiteList = ['/login'] // const store = useStore() export function createRouterGuards(router: Router, routes: any) { router.beforeEach((to, form, next) => { let token = localStorage.getItem("token") if (token) { // console.log(store.state.user.routes.length) if (! Store. The state. The user. The routes. Length) {/ / pull useinfo information store. Dispatch (' GetInfo) store. Dispatch (" GenerateRoutes "). Then ((res) => { const layout = routes.find((item: any) => item.name == 'sysjindex')! layout.children = [...res] router.addRoute(layout) // res.map((item: any) => router.addRoute("sysjindex", item)) next({ ... To, replace: true})})} else {next()}} else {// No token if (whitelist.indexof (to.path)! == -1) {// Next ()} else {next(' /login? Redirect =${to.fullPath} ') // Otherwise all redirects to the login page}}})}Copy the code

2.1 Store access processing getRoutes

// actions const actions = {// Generate route GenerateRoutes({commit}: ActionContext<any, Any >) {return new Promise(resolve => {// request route data getRouters(). Then (res => {let accessedRoutes = filterAsnycRouter(res.data); accessedRoutes = indexChildRoutes.concat(accessedRoutes) // accessedRoutes.push({ path: "*", redirect: "/404", hidden: true }); commit("SET_ROUTES", accessedRoutes); // console.log(accessedRoutes) resolve(accessedRoutes); }); }); },... } // mutations const mutations = { SET_ROUTES: (state: State, routes: Array<any>) => { state.routes = routes; },Copy the code

In filterAsnycRouter, create importroutercom. ts file in main.ts level directory for processing. The Glob pattern is treated as an import identifier: it must be a relative path (beginning with a./) or an absolute path (beginning with a /, resolved relative to the project root).

2.2, importRoutercom. Ts

import 'vite/dynamic-import-polyfill'; export function filterAsnycRouter(asyncRouterMap: any) { return asyncRouterMap.filter((route: any) => { if (route.component == 'Layout') { route.component = () => import('./layouts/BlankIndex.vue') } else { route.path = `${route.path}` route.component = resolveComponent(route.component); } if (route.children ! = null && route.children && route.children.length) { route.children = filterAsnycRouter(route.children); } return true; }) } const pages = import.meta.globEager('./views/**/*.vue'); // Start with './ 'or absolute path (start with'/') const resolveComponent = (name: any) => {const importPage = pages['./views/${name}.vue ']; if (! importPage) { throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension? `); } // return importPage().then(module => module.default); return importPage.default }Copy the code

In build, unknown variable dynamic import: error

Reference code: owenconti.com/posts/repla…