if-admin-layout - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

package.json

 {
   "name": "if-admin-layout",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "基于Element-plus的侧边栏组件",
@@ -5,0 +5,0 @@ "main": "./src/layout/index.js",

src/layout/components/IfLayout.vue

@@ -25,3 +25,3 @@ <template>
 // import IfTransition from './IfTransition.vue';
-import { SideBar, NavBar, TagView } from '.'
+import { SideBar, NavBar, TagView } from './index'
 import { getGetters, getState } from '../hooks'
@@ -32,3 +32,2 @@ import { useRoute } from 'vue-router'
 const $state = getState()
-
 // 检测当前路由配置， 清除不必要的缓存
@@ -35,0 +34,0 @@

src/layout/components/IfMicroApp.vue

 <template>
     <div :id="id" ref="container">
-        <div class="loading-wave">
+        <div class="loading-wave" v-if="!error">
             <div class="stick"></div>
@@ -12,2 +12,5 @@ <div class="stick"></div>
         </div>
+        <div v-else class="micro-error">
+            {{error}}
+        </div>
     </div>
@@ -17,9 +20,5 @@ </template>
 import { onMounted, ref, onUnmounted } from 'vue';
-import { loadMicroApp } from 'qiankun';
 import { closePage, setTitle } from '../../layout'
 import { useRoute } from 'vue-router';
 const $route = useRoute();
-
-
-
 const id = 'MicroAppContainer'
@@ -29,2 +28,3 @@ const container = ref(null)
 const app = ref(null)
+
 onMounted(() => {
@@ -35,14 +35,21 @@ console.log('mounted basic');
         if (!app.value) {
-            app.value = loadMicroApp({
-                name: $route.name,
-                entry: entry,
-                container: container.value,
-                props: {
-                    setTitle,
-                    closePage
-                }
+            import('qiankun').then(({loadMicroApp, addGlobalUncaughtErrorHandler}) => {
+                addGlobalUncaughtErrorHandler(e => {
+                    error.value = e.reason.message
+                })
+                try {
+                    app.value = loadMicroApp({
+                        name: $route.name,
+                        entry: entry,
+                        container: container.value,
+                        props: {
+                            setTitle,
+                            closePage
+                        }
+                    })
+                    setTitle(title)
+                } catch(e) {e}
+                
             })
-            setTitle(title)
         }
-
     } catch (e) {
@@ -120,2 +127,8 @@ error.value = e
 
+.micro-error{
+    text-align: center;
+    color:#f30;
+    font-size: 16px;
+    margin-top: 30px;;
+}
 </style>

src/layout/components/TagView.vue

@@ -8,3 +8,2 @@ <template>
                 </template>
-               
             </div>
@@ -16,3 +15,3 @@ </ElScrollbar>
 <script setup>
-import { getState, pageClose  } from '../hooks'
+import { getState, pageClose} from '../hooks'
 import {useRouter} from 'vue-router'
@@ -22,2 +21,4 @@ const $state = getState();
 const $router = useRouter()
+
+
 const closePage = (page) => {
@@ -30,6 +31,3 @@ pageClose(page);
 }
-// 加载缓存的页签
 
-
-
 </script>
@@ -36,0 +34,0 @@

src/layout/hooks/index.js

 import { useLayoutConfig } from '../index';
 import { computed } from 'vue'
 
-export const StoreName = 'if-layout-config';
+export const StoreName = 'if-layout-config'
 
@@ -6,0 +6,0 @@ export const useConfig = () => {

src/layout/index.js

 import { IfLayout as Layout, IfKeepAlive, IfMicroApp } from './components'
 import IfLayoutConfigStore from './store'
-import { inject } from 'vue'
+import { inject, nextTick, markRaw } from 'vue'
 import { StoreName, getRoutes } from './hooks';
@@ -8,5 +8,4 @@ import createPersistedState from 'vuex-persistedstate'
 export {setTitle, closePage} from './hooks';
-
+export {IfLayout, IfMicroApp} from './components'
 let cacheConfig;
-
 export default class IfLayoutConfig {
@@ -23,7 +22,6 @@ constructor(app, config) {
         store.registerModule(StoreName, IfLayoutConfigStore, { preserveState: false });
-        const router = this.setRoutes(routes, _router);
 
         if (config) this.update(config);
-        this.initTagView(router)
 
+
         // State数据持久化
@@ -34,2 +32,8 @@ createPersistedState({
         })(store)
+
+        nextTick(() => {
+            const router = this.setRoutes(routes, _router);
+            this.initTagView(router)
+        })
+        
     }
@@ -76,3 +80,3 @@
             if(route?.meta?.micro && !route.component) {
-                route.component = IfMicroApp
+                route.component = markRaw(IfMicroApp)
             }
@@ -115,3 +119,2 @@ if(route.children && route.children.length) {
 }
-export const IfLayout = Layout
 
@@ -118,0 +121,0 @@ export function useLayoutConfig() {

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Improved metrics

Total package byte prevSize

34862

1.71%

Lines of code

659

0.3%

Worsened metrics

Number of medium maintenance alerts

1

Infinity%

No dependency changes