自定义菜单URL添加参数后页面加载异常处理

src/utils/util.import.development.js

@@ -6,4 +6,25 @@
  * 所以建议只在生产环境之中使用路由懒加载功能。
  * &&这里注意一下该写法只支持 vue-loader at least v13.0.0+
  */
-module.exports = file => require('@/views' + file).default
+// module.exports = file => require('@/views' + file).default
+
+module.exports = (file, params = {}) => {
+    // 如果路径包含 `?`，提取参数
+    const [path, query] = file.split('?')
+    const component = require('@/views' + path).default
+
+    // 如果有参数，附加到组件
+    if (query || Object.keys(params).length) {
+        const queryParams = new URLSearchParams(query || '')
+        const allParams = { ...Object.fromEntries(queryParams), ...params }
+
+        // 方法仅初始化调用，返回 props 无用，菜单URL参数通过 defaultUrl 获取
+        // return {
+        //     ...component,
+        //     props: allParams
+        // }
+        return component
+    }
+
+    return component
+}

src/utils/util.import.production.js

@@ -6,5 +6,25 @@
  * 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
  *
  */
-module.exports = file => () => import('@/views' + file)
+// module.exports = file => () => import('@/views' + file)
 
+module.exports = (file, params = {}) => {
+    // 如果路径包含 `?`，提取参数
+    const [path, query] = file.split('?')
+    const component = import('@/views' + file)
+
+    // 如果有参数，附加到组件
+    if (query || Object.keys(params).length) {
+        const queryParams = new URLSearchParams(query || '')
+        const allParams = { ...Object.fromEntries(queryParams), ...params }
+
+        // 方法仅初始化调用，返回 props 无用，菜单URL参数通过 defaultUrl 获取
+        // return {
+        //     ...component,
+        //     props: allParams
+        // }
+        return component
+    }
+
+    return component
+}