hookehuyr

新增路由配置表功能

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