✨ feat(动态路由): 重写动态路由模块，解决子路由无法使用和刷新白屏问题

@@ -8,7 +8,18 @@ const routes = [{
     title: 'html转图片',
     name: ''
   },
-  children: []
+  children: [{
+    path: 'children',
+    redirect: '',
+    name: 'html转图片',
+    component: 'children-test',
+    keepAlive: '',
+    meta: {
+      title: 'html转图片',
+      name: ''
+    }
+  }]
 }]
+// const routes = []
 
 export default routes

 /*
  * @Date: 2022-05-26 13:57:28
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-15 11:00:05
+ * @LastEditTime: 2022-06-29 17:11:27
  * @FilePath: /tswj/src/router.js
  * @Description: 文件描述
  */
 import { createRouter, createWebHashHistory } from 'vue-router';
 import RootRoute from './route.js';
-import { generateRoute } from './utils/generateRoute'
+import asyncRoutesArr from "./mock/routes"
+import generateRoutes from './utils/generateRoute'
 
 // TAG: 路由配置表
 /**
@@ -35,11 +36,19 @@ const router = createRouter({
 /**
  * generateRoute 负责把后台返回数据拼接成项目需要的路由结构，动态添加到路由表里面
  */
-router.beforeEach((to) => { // next 不能用了，被return替代了
-  if (!router.hasRoute(to.name)) { // 如果不存在
-    router.addRoute(generateRoute(to)) // 新增路由
-    // 触发重定向
-    return to.fullPath
+router.beforeEach((to, from, next) => {
+  if (!router.hasRoute(to.name)) { // 如果路由地址不存在
+    // 模拟异步操作
+    setTimeout(() => {
+      if (!asyncRoutesArr.length) return; // 没有动态路由避免报错
+      const arr = generateRoutes(asyncRoutesArr); // 在路由守卫处生成，避免有子路由时刷新白屏问题。
+      arr.forEach(item => {
+        router.addRoute(item) // 新增路由
+      })
+      next({ ...to, replace: true })
+    }, 1000);
+  } else {
+    next()
   }
 })
 

 /*
  * @Date: 2022-05-16 17:21:45
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-29 16:00:23
+ * @LastEditTime: 2022-06-29 17:00:15
  * @FilePath: /tswj/src/utils/generateRoute.js
  * @Description: 文件描述
  */
-import asyncRoutes from "../mock/routes"
 
 /**
  * 根据后台返回的路径，生成页面的组件模版
@@ -16,14 +15,12 @@ function loadView(component) {
   return () => import(`../views/${component}.vue`)
 }
 
-const formatRoutesArr = []
-
 /**
  * 生成路由结构
- * @param {*} routes 动态获取数据
- * @description 动态路由没有嵌套结构，children被拉平，都是平级的结构
+ * @param {*} routes
  */
-const formatRoutes = (routes) => {
+const generateRoutes = (routes) => {
+  const arr = []
   routes.forEach(route => {
     const router = {}
     const {
@@ -42,25 +39,10 @@ const formatRoutes = (routes) => {
     router.component = loadView(component)
     keepAlive && (router.keepAlive = keepAlive)
     meta && (router.meta = meta)
-    router.children = !Array.isArray(children) || formatRoutes(children);
-
-    formatRoutesArr.push(router)
+    router.children = !Array.isArray(children) || generateRoutes(children);
+    arr.push(router)
   })
+  return arr
 }
 
-formatRoutes(asyncRoutes)
-
-/**
- * 生成动态路由
- * @param {*} to 
- * @returns 符合路径条件的动态路由结构
- */
-export const generateRoute = (to) => {
-  let router = ''
-  formatRoutesArr.forEach(item => {
-    if (item.path === to.path) {
-      router = item
-    }
-  })
-  return { ...to, ...router }
-}
+export default generateRoutes;

+<!--
+ * @Date: 2022-06-29 15:57:45
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-29 15:57:52
+ * @FilePath: /tswj/src/views/children-test.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="">test</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
+//import { } from '@/utils/generateModules.js'
+//import { } from '@/utils/generateIcons.js'
+//import { } from '@/composables'
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

@@ -5,11 +5,13 @@
       <img :src="logo_image" alt="" />
     </div>
     <div v-if="imgUrl">
-      <img :src="imgUrl" alt="" crossOrigin="anonymous"  style="width: 300px; height: 300px;"/>
+      <img :src="imgUrl" alt="" crossOrigin="anonymous" style="width: 300px; height: 300px;" />
     </div>
     <div>
       <div @click="createImage">合成图片</div>
+      <div @click="btn">child</div>
     </div>
+    <router-view></router-view>
   </div>
 </template>
 
@@ -67,6 +69,9 @@ export default {
             console.log("绘制失败");
           });
       });
+    },
+    btn () {
+      this.$router.push('/image/children')
     }
   }
 }
@@ -106,4 +111,4 @@ img {
 .m-btn {
   margin-left: 50px;
 }
-</style>
\ No newline at end of file
+</style>