vite+vue3中能否实现完全的动态路由？

Question

vite+vue3中能否实现完全的动态路由？

我现在是这样写的

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

interface Meta {
    label: string
}

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

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

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

router.beforeEach((to : RouteLocationNormalized, from : RouteLocationNormalized) : void => {
    console.log(to,from);
    // @ts-ignore
    let jurisdictionId : number  = jurisdictionStore().getJurisdictionId.value;
    getRouterList(jurisdictionId).then(response => {
        for (let i : number = 0; i < response.length; i++) {
            let componentPath : string = '../pages' + response[i].component;
            routes.push({
                ...response[i],
                // @ts-ignore
                component: () : string => import(componentPath)
            });
        }
        console.log(routes);
    }).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;

我现在获取到的结果是这样的

[
  {
        path: '/admin/404',
        // @ts-ignore
        component: () : string => import('../pages/error/Admin404.vue'),
        meta: {
            label: '404-找不到页面'
        }
    },
    {
        path: '/404',
        name: '404-找不到页面',
        // @ts-ignore
        component: () : string => import('../pages/error/404.vue'),
        meta: {
            label: '404页面'
        }
    },
    {
        path: '/',
        name: 'index',
        // @ts-ignore
        component: () : () => import(__vite__injectQuery(componentPath, 'import')),
        meta: {
            label: '首页'
        }
    }
]

有什么办法做到吗？

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

在 Vite + Vue 3 中可以实现完全的动态路由。您可以使用 Vue Router 的 addRoute 方法来动态添加路由。

首先，您需要将路由的创建和全局路由实例的创建分开。在这种情况下，您可以在单独的模块中创建一个空的路由实例。

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

export const router = createRouter({
  history: createWebHistory(),
  routes: []
});

接下来，您可以在获取到路由列表的回调函数中使用 addRoute 方法来动态添加路由。

// main.js
import { createApp } from 'vue';
import { router } from './router';
import App from './App.vue';

// 获取路由列表
getRouterList(jurisdictionId).then(response => {
  for (let i = 0; i < response.length; i++) {
    let route = {
      path: response[i].path,
      name: response[i].name,
      component: () => import(`../pages${response[i].component}`),
      meta: {
        label: response[i].label
      }
    };
    router.addRoute(route);
  }
}).catch(err => {
  console.log('错误原因: ' + err.message);
  show('error', '获取路由列表失败，请刷新重试！');
  showLoading(false);
});

createApp(App).use(router).mount('#app');

这样，您就可以动态添加路由了。请注意，动态添加路由需要在路由实例创建之后执行。否则，将无法正常添加路由。

希望对您有所帮助！