vite+vue3动态配置路由

Question

我在路由这配置的是动态获取路由的配置信息，我使用的技术栈是vite+vue3，现在获取到了数据，但是vite会来操作我的数据，现在在component哪一块跟静态配置的路由不一样，导致我现在页面显示空白

import {createRouter, createWebHistory, NavigationGuardNext, RouteLocationNormalized, Router} from 'vue-router';
import {isNotEmptyString} from "../utils/toolUtil.ts";
import {jurisdictionStore} from "../stores/jurisdiction.ts";
import {getRouterList} from "../api/routerApi.ts";
import {show, showLoading} from "../utils/messageUtil.ts";

interface Meta {
    title: string
}

interface Routes {
  path: string,
  name?: string,
  component: Function,
  meta: Meta,
  children?: Routes[]
}

export const routes : Routes[]  = [
    {
        path: '/admin/404',
        // @ts-ignore
        component: () : string => import('../pages/error/Admin404.vue'),
        meta: {
            title: '404-找不到页面'
        }
    },
    {
        path: '/404',
        name: '404-找不到页面',
        // @ts-ignore
        component: () : string => import('../pages/error/404.vue'),
        meta: {
            title: '404页面'
        }
    }
];

const router : Router = createRouter({
    history: createWebHistory(),
    // @ts-ignore
    routes: routes,
    dynamic: true
});

router.beforeEach((to : RouteLocationNormalized,from : RouteLocationNormalized,next : NavigationGuardNext) => {
    console.log(to,from)
    // 获取权限id
    // @ts-ignore
    let jurisdictionId = jurisdictionStore().getJurisdictionId.value;
    getRouterList(jurisdictionId).then(response => {
        for (let i : number = 0; i < response.length; i++) {
            let route = {
                path: response[i].path,
                name: response[i].name,
                // @ts-ignore
                component: () : string => import(`../pages${response[i].component}`),
                meta: response[i].meta
            };
            router.addRoute(route);
            showLoading(false);
        }
        next();
    }).catch(err => {
        console.log('错误原因: ' + err.message);
        show('error','获取路由列表失败');
        showLoading(false);
    })
})

router.afterEach((to : RouteLocationNormalized) : void => {
    let title = to.meta.title;
    // @ts-ignore
    if (isNotEmptyString(title)) {
        // 修改html的标题为meta中的名称
        // @ts-ignore
        document.title = title;
    }
});

export default router;

Answer 1

【以下回答由 GPT 生成】

解决方案

根据提供的代码和问题描述，问题可能出现在动态配置路由时使用了异步组件加载的方式，而默认情况下，在 Vue.js 中使用异步组件加载时，需要使用 @next 版本的 vue-router。以下是解决该问题的步骤：

1. 确保你的项目中已经安装了 @next 版本的 vue-router ，可以使用以下命令进行安装：

npm install vue-router@next

1. 确保你的项目中已经正确安装和配置了 Vite，你可以使用以下命令进行安装：

npm install --global create-vite     # 全局安装 create-vite
npx create-vite your-project-name    # 创建项目
cd your-project-name                 # 进入项目目录
npm install                          # 安装依赖
npm run dev                          # 启动开发服务器

1. 修改代码中的关键部分，确保正常加载异步组件：

import {createRouter, createWebHistory} from 'vue-router';

// ...

const routes = [
  // 静态路由
  {
    path: '/admin/404',
    // @ts-ignore
    component: () => import('../pages/error/Admin404.vue'),
    meta: {
      title: '404-找不到页面'
    }
  },
  {
    path: '/404',
    name: '404-找不到页面',
    // @ts-ignore
    component: () => import('../pages/error/404.vue'),
    meta: {
      title: '404页面'
    }
  }
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes // 这里直接传入静态路由配置即可
});

// ...

export default router;

1. 运行项目，查看是否能正常显示页面。

请注意，以上解决方案是基于提供的代码和描述的，如果问题仍然存在，请提供更详细的错误信息或代码片段以便更好地帮助你解决问题。我无法提供更具体的解决方案。

【相关推荐】

• 请看👉 ：vite为vue3配置@路径，vite路径配置
• 除此之外, 这篇博客: 关于vue3.0 + vite的坑（持续更新，有问题在下面留言，解决过的我可以帮忙）中的 打包不了可能是这个问题 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^