hookehuyr

新增路由配置表功能

import { createRouter, createWebHashHistory } from 'vue-router';
import routes from './route.js';
import RootRoute from './route.js';
import { generateRoute } from './utils/generateRoute'
// TAG: 路由配置表
/**
* 把项目独有的路由配置到相应的路径,默认路由文件只放公用部分
* 但是 vue 文件内容还是要事先准备好
*/
const modules = import.meta.globEager('@/router/routes/modules/**/*.js'); // Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块
const routeModuleList = [];
Object.keys(modules).forEach((key) => {
const mod = modules[key].default || {};
const modList = Array.isArray(mod) ? [...mod] : [mod];
routeModuleList.push(...modList);
});
// TODO: 微信分享测试
import share from '@/utils/share'
// 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
history: createWebHashHistory('/index.html'),
routes
routes: [...RootRoute, ...routeModuleList]
});
// TAG: 动态生成路由
/**
* generateRoute 负责把后台返回数据拼接成项目需要的路由结构,动态添加到路由表里面
*/
router.beforeEach((to) => { // next 不能用了,被return替代了
if (!router.hasRoute(to.name)) { // 如果不存在
router.addRoute(generateRoute(to)) // 新增路由
......
const index = {
path: '/router/test',
name: 'test',
component: () => import('@/views/about.vue'),
redirect: '',
meta: {
icon: '',
title: '',
},
children: [],
};
export default index;
<template>
<div class="">router test</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
</script>
<script>
import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
......@@ -35,7 +35,6 @@
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx",
"src/store/index.js",
],
"exclude": [
"node_modules",
......