✨ feat(动态路由模块): 修复路由控制台报错问题，处理动态路由传值问题

 /*
  * @Date: 2022-05-26 13:57:28
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-29 17:11:27
+ * @LastEditTime: 2022-06-29 20:06:11
  * @FilePath: /tswj/src/router.js
  * @Description: 文件描述
  */
@@ -25,8 +25,6 @@ Object.keys(modules).forEach((key) => {
 });
 
 // 创建路由实例并传递 `routes` 配置
-// 你可以在这里输入更多的配置，但我们在这里
-
 const router = createRouter({
   history: createWebHashHistory('/index.html'),
   routes: [...RootRoute, ...routeModuleList]
@@ -37,7 +35,8 @@ const router = createRouter({
  * generateRoute 负责把后台返回数据拼接成项目需要的路由结构，动态添加到路由表里面
  */
 router.beforeEach((to, from, next) => {
-  if (!router.hasRoute(to.name)) { // 如果路由地址不存在
+  // 使用404为中转页面，避免动态路由没有渲染出来，控制台报错问题
+  if (to.path == '/404' && to.redirectedFrom != undefined) {
     // 模拟异步操作
     setTimeout(() => {
       if (!asyncRoutesArr.length) return; // 没有动态路由避免报错
@@ -45,7 +44,8 @@ router.beforeEach((to, from, next) => {
       arr.forEach(item => {
         router.addRoute(item) // 新增路由
       })
-      next({ ...to, replace: true })
+      // 重写被404覆盖路由信息
+      next({ ...to.redirectedFrom, replace: true });
     }, 1000);
   } else {
     next()

+/*
+ * @Date: 2022-06-15 17:09:03
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-29 18:36:37
+ * @FilePath: /tswj/src/router/routes/modules/test/index.js
+ * @Description: 文件描述
+ */
 const index = [{
   path: '/html2canvas',
   name: 'html2canvas',
@@ -18,6 +25,20 @@ const index = [{
     title: '测试slot插槽',
   },
   children: [],
+}, 
+{
+  path: '/:pathMatch(.*)*',
+  redirect: '/404'
+}, 
+{
+  path: '/404',
+  name: '404',
+  component: () => import('@/views/test/404.vue'),
+  meta: {
+    icon: '',
+    title: '404',
+  },
+  children: [],
 }];
 
 export default index;

@@ -71,7 +71,12 @@ export default {
       });
     },
     btn () {
-      this.$router.push('/image/children')
+      this.$router.push({
+        path: '/image/children',
+        query: {
+          abc: 1
+        }
+      })
     }
   }
 }