'admin-21.01.21:创建界面、处理路由缓存问题'

vue-admin-wonderful-next/src/router/index.ts

@@ -9,189 +9,304 @@ export const dynamicRoutes = [
             title: '首页',
             isLink: '',
             isHide: false,
+            isKeepAlive: true,
             icon: 'iconfont icon-shouye'
         },
-        children: [
+        children: [{
-            {
+            path: '/home',
-                path: '/home',
+            component: () => import('/@/views/home/index.vue'),
-                component: () => import('/@/views/home/index.vue'),
+            meta: {
-                meta: {
+                title: '首页',
-                    title: '首页',
+                isLink: '',
-                    isLink: '',
+                isHide: false,
-                    isHide: false,
+                isKeepAlive: true,
-                    icon: 'iconfont icon-shouye'
+                icon: 'iconfont icon-shouye'
-                }
             }
-        ]
-    },
-    {
-        path: '/system',
-        component: () => import('/@/views/layout/index.vue'),
-        redirect: '/system/menu',
-        meta: {
-            title: '系统设置',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-xitongshezhi'
         },
-        children: [
+        {
-            {
+            path: '/system',
-                path: '/system/menu',
+            name: 'system',
-                component: () => import('/@/views/system/menu/index.vue'),
+            component: () => import('/@/views/layout/routerView/parent.vue'),
-                meta: {
+            redirect: '/system/menu',
-                    title: '菜单管理',
+            meta: {
-                    isLink: '',
+                title: '系统设置',
-                    isHide: false,
+                isLink: '',
-                    icon: 'iconfont icon-caidan'
+                isHide: false,
-                }
+                icon: 'iconfont icon-xitongshezhi',
+                isKeepAlive: true
             },
-            {
+            children: [
-                path: '/system/user',
+                {
-                component: () => import('/@/views/system/user/index.vue'),
+                    path: '/system/menu',
-                meta: {
+                    name: "systemMenu",
-                    title: '用户管理',
+                    component: () => import('/@/views/system/menu/index.vue'),
-                    isLink: '',
+                    meta: {
-                    isHide: false,
+                        title: '菜单管理',
-                    icon: 'iconfont icon-icon-'
+                        isLink: '',
-                }
+                        isHide: false,
-            }
+                        icon: 'iconfont icon-caidan',
-        ]
+                        isKeepAlive: true
-    },
+                    }
-    {
+                },
-        path: '/limits',
+                {
-        component: () => import('/@/views/docs/index.vue'),
+                    path: '/system/user',
-        redirect: '/limits/frontEnd',
+                    name: "systemUser",
-        meta: {
+                    component: () => import('/@/views/system/user/index.vue'),
-            title: '权限管理',
+                    meta: {
-            isLink: '',
+                        title: '用户管理',
-            isHide: false,
+                        isLink: '',
-            icon: 'iconfont icon-quanxian'
+                        isHide: false,
-        },
+                        icon: 'iconfont icon-icon-',
-        children: [
+                        isKeepAlive: false
-            {
-                path: '/limits/frontEnd',
-                component: () => import('/@/views/docs/index.vue'),
-                redirect: '/limits/frontEnd/page',
-                meta: {
-                    title: '前端控制',
-                    isLink: '',
-                    isHide: false
-                },
-                children: [
-                    {
-                        path: '/limits/frontEnd/page',
-                        component: () => import('/@/views/docs/index.vue'),
-                        meta: {
-                            title: '页面权限',
-                            isLink: '',
-                            isHide: false
-                        }
-                    },
-                    {
-                        path: '/limits/frontEnd/btn',
-                        component: () => import('/@/views/docs/index.vue'),
-                        meta: {
-                            title: '按钮权限',
-                            isLink: '',
-                            isHide: false
-                        }
                     }
-                ]
-            },
-            {
-                path: '/limits/backEnd',
-                component: () => import('/@/views/docs/index.vue'),
-                meta: {
-                    title: '后端控制',
-                    isLink: '',
-                    isHide: false
                 }
+            ]
+        },
+        {
+            path: '/limits',
+            component: () => import('/@/views/layout/routerView/parent.vue'),
+            redirect: '/limits/frontEnd',
+            meta: {
+                title: '权限管理',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-quanxian'
+            },
+            children: [
+                {
+                    path: '/limits/frontEnd',
+                    component: () => import('/@/views/layout/routerView/parent.vue'),
+                    redirect: '/limits/frontEnd/page',
+                    meta: {
+                        title: '前端控制',
+                        isLink: '',
+                        isHide: false
+                    },
+                    children: [
+                        {
+                            path: '/limits/frontEnd/page',
+                            component: () => import('/@/views/limits/frontEnd/page/index.vue'),
+                            meta: {
+                                title: '页面权限',
+                                isLink: '',
+                                isHide: false
+                            }
+                        },
+                        {
+                            path: '/limits/frontEnd/btn',
+                            component: () => import('/@/views/limits/frontEnd/btn/index.vue'),
+                            meta: {
+                                title: '按钮权限',
+                                isLink: '',
+                                isHide: false
+                            }
+                        }
+                    ]
+                },
+                {
+                    path: '/limits/backEnd',
+                    component: () => import('/@/views/layout/routerView/parent.vue'),
+                    meta: {
+                        title: '后端控制',
+                        isLink: '',
+                        isHide: false
+                    },
+                    children: [
+                        {
+                            path: '/limits/backEnd/page',
+                            component: () => import('/@/views/limits/backEnd/page/index.vue'),
+                            meta: {
+                                title: '页面权限',
+                                isLink: '',
+                                isHide: false
+                            }
+                        },
+                        {
+                            path: '/limits/backEnd/btn',
+                            component: () => import('/@/views/limits/backEnd/btn/index.vue'),
+                            meta: {
+                                title: '按钮权限',
+                                isLink: '',
+                                isHide: false
+                            }
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            path: '/menu',
+            component: () => import('/@/views/layout/routerView/parent.vue'),
+            redirect: '/menu/menu1',
+            meta: {
+                title: '路由嵌套',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-xitongshezhi'
+            },
+            children: [
+                {
+                    path: '/menu/menu1',
+                    component: () => import('/@/views/layout/routerView/parent.vue'),
+                    redirect: '/menu/menu1/menu11',
+                    meta: {
+                        title: '菜单1',
+                        isLink: '',
+                        isHide: false,
+                        icon: 'iconfont icon-caidan'
+                    },
+                    children: [
+                        {
+                            path: '/menu/menu1/menu11',
+                            component: () => import('/@/views/menu/menu1/menu11/index.vue'),
+                            meta: {
+                                title: '菜单11',
+                                isLink: '',
+                                isHide: false,
+                                icon: 'iconfont icon-caidan'
+                            }
+                        },
+                        {
+                            path: '/menu/menu1/menu12',
+                            component: () => import('/@/views/layout/routerView/parent.vue'),
+                            redirect: '/menu/menu1/menu12/menu121',
+                            meta: {
+                                title: '菜单12',
+                                isLink: '',
+                                isHide: false,
+                                icon: 'iconfont icon-caidan'
+                            },
+                            children: [
+                                {
+                                    path: '/menu/menu1/menu12/menu121',
+                                    component: () => import('/@/views/menu/menu1/menu12/menu121/index.vue'),
+                                    meta: {
+                                        title: '菜单121',
+                                        isLink: '',
+                                        isHide: false,
+                                        icon: 'iconfont icon-caidan'
+                                    }
+                                },
+                                {
+                                    path: '/menu/menu1/menu12/menu122',
+                                    component: () => import('/@/views/menu/menu1/menu12/menu122/index.vue'),
+                                    meta: {
+                                        title: '菜单122',
+                                        isLink: '',
+                                        isHide: false,
+                                        icon: 'iconfont icon-caidan'
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            path: '/menu/menu1/menu13',
+                            component: () => import('/@/views/menu/menu1/menu13/index.vue'),
+                            meta: {
+                                title: '菜单13',
+                                isLink: '',
+                                isHide: false,
+                                icon: 'iconfont icon-caidan'
+                            }
+                        }
+                    ]
+                },
+                {
+                    path: '/menu/menu2',
+                    component: () => import('/@/views/menu/menu2/index.vue'),
+                    meta: {
+                        title: '菜单2',
+                        isLink: '',
+                        isHide: false,
+                        icon: 'iconfont icon-caidan'
+                    }
+                }
+            ]
+        },
+        {
+            path: '/fun',
+            component: () => import('/@/views/fun/index.vue'),
+            meta: {
+                title: '功能',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-crew_feature'
             }
-        ]
+        },
-    },
+        {
-    {
+            path: '/pages',
-        path: '/fun',
+            component: () => import('/@/views/pages/index.vue'),
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
-        meta: {
+                title: '页面',
-            title: '功能',
+                isLink: '',
-            isLink: '',
+                isHide: false,
-            isHide: false,
+                icon: 'iconfont icon-fuzhiyemian'
-            icon: 'iconfont icon-crew_feature'
+            }
-        }
+        },
-    },
+        {
-    {
+            path: '/components',
-        path: '/pages',
+            component: () => import('/@/views/components/index.vue'),
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
-        meta: {
+                title: '组件',
-            title: '页面',
+                isLink: '',
-            isLink: '',
+                isHide: false,
-            isHide: false,
+                icon: 'iconfont icon-zujian'
-            icon: 'iconfont icon-fuzhiyemian'
+            }
-        }
+        },
-    },
+        {
-    {
+            path: '/chart',
-        path: '/components',
+            component: () => import('/@/views/chart/index.vue'),
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
-        meta: {
+                title: '大数据图表',
-            title: '组件',
+                isLink: '',
-            isLink: '',
+                isHide: false,
-            isHide: false,
+                icon: 'iconfont icon-ico_shuju'
-            icon: 'iconfont icon-zujian'
+            }
-        }
+        },
-    },
+        {
-    {
+            path: '/personal',
-        path: '/chart',
+            component: () => import('/@/views/personal/index.vue'),
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
-        meta: {
+                title: '个人中心',
-            title: '大数据图表',
+                isLink: '',
-            isLink: '',
+                isHide: false,
-            isHide: false,
+                icon: 'iconfont icon-gerenzhongxin'
-            icon: 'iconfont icon-ico_shuju'
+            }
-        }
+        },
-    },
+        {
-    {
+            path: '/tools',
-        path: '/docs1',
+            component: () => import('/@/views/tools/index.vue'),
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            meta: {
-        meta: {
+                title: '工具类集合',
-            title: '个人中心',
+                isLink: '',
-            isLink: '',
+                isHide: false,
-            isHide: false,
+                icon: 'iconfont icon-gongju'
-            icon: 'iconfont icon-gerenzhongxin'
+            }
-        }
+        },
-    },
+        {
-    {
+            path: '/link',
-        path: '/docs2',
+            component: () => import('/@/views/layout/routerView/parent.vue'),
-        component: () => import('/@/views/docs copy 2/index.vue'),
+            meta: {
-        meta: {
+                title: '外链',
-            title: '工具类集合',
+                isLink: '',
-            isLink: '',
+                isHide: false,
-            isHide: false,
+                icon: 'iconfont icon-caozuo-wailian'
-            icon: 'iconfont icon-gongju'
+            }
-        }
+        },
-    },
+        {
-    {
+            path: '/iframe',
-        path: '/docs3',
+            component: () => import('/@/views/layout/routerView/iframe.vue'),
-        component: () => import('/@/views/docs copy 3/index.vue'),
+            meta: {
-        meta: {
+                title: '内嵌 iframe',
-            title: '外链',
+                isLink: '',
-            isLink: '',
+                isHide: false,
-            isHide: false,
+                icon: 'iconfont icon-neiqianshujuchucun'
-            icon: 'iconfont icon-caozuo-wailian'
+            }
-        }
+        }]
-    },
-    {
-        path: '/iframe',
-        component: () => import('/@/views/docs copy 3/index.vue'),
-        meta: {
-            title: '内嵌 iframe',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-neiqianshujuchucun'
-        }
     }
 ]
 
-export const staticRoutes: Array<RouteRecordRaw> = [
+const staticRoutes: Array<RouteRecordRaw> = [
     {
         path: '/login',
         component: () => import('/@/views/login/index.vue'),

vue-admin-wonderful-next/src/theme/element.scss

@@ -786,6 +786,10 @@
   width: 24px;
   text-align: center;
 }
+// 获取焦点时
+.el-menu-item:focus {
+  background: transparent !important;
+}
 
 /* Tabs 标签页
 ------------------------------- */

vue-admin-wonderful-next/src/views/chart/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    chartIndex
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "chartIndex",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/components/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    componentsIndex
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "componentsIndex",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/docs copy 1/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 2/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/docs copy 3/index.vue

@@ -1,3 +0,0 @@
-<template>
-  docs
-</template>

vue-admin-wonderful-next/src/views/fun/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    funIndex
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "funIndex",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/layout/component/aside.vue

@@ -32,7 +32,7 @@ export default {
     // 设置/过滤路由（非静态路由/是否显示在菜单中）
     const setFilterRoutes = () => {
       store.dispatch("setRoutes");
-      state.menuList = filterRoutesFun(store.state.routes);
+      state.menuList = filterRoutesFun(store.state.routes[0].children);
     };
     // 路由过滤递归函数
     const filterRoutesFun = (arr: Array<object>) => {

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue

@@ -40,7 +40,6 @@ export default {
       breadcrumbList: [{ meta: { title: "", icon: "" } }], // 定义初始值，不能为空数组，否则 v-for 报错
     });
     const getBreadcrumbList = (matched: any) => {
-      console.log(matched);
       state.breadcrumbList = matched;
     };
     const onBreadcrumbClick = (v: object) => {

vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue

@@ -128,8 +128,8 @@ export default {
     });
     onBeforeRouteUpdate((to) => {
       state.routePath = to.path;
-      getTagsRefsIndex(to.path);
+      // getTagsRefsIndex(to.path);
-      moveToCurrentTag();
+      // moveToCurrentTag();
     });
     return {
       isActive,

vue-admin-wonderful-next/src/views/layout/routerView/iframe.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    iframeIndex
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "iframeIndex",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/layout/routerView/parent.vue

@@ -1,11 +1,13 @@
 <template>
-  <router-view v-slot="{ Component }" :key="Math.random()">
+  <div>
-    <transition :name="setTransitionName" mode="out-in">
+    <router-view v-slot="{ Component, route }">
-      <keep-alive>
+      <transition :name="setTransitionName" mode="out-in">
-        <component :is="Component" />
+        <keep-alive include="home,systemMenu">
-      </keep-alive>
+          <component :is="Component" />
-    </transition>
+        </keep-alive>
-  </router-view>
+      </transition>
+    </router-view>
+  </div>
 </template>
 
 <script lang="ts">
@@ -16,6 +18,7 @@ import {
   reactive,
   getCurrentInstance,
   watch,
+  onBeforeMount,
 } from "vue";
 import { useStore } from "/@/store/index.ts";
 export default defineComponent({

vue-admin-wonderful-next/src/views/limits/backEnd/btn/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    limitsBackEndEndBtn
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "limitsBackEndEndBtn",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/limits/backEnd/page/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    limitsBackEndEndPage
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "limitsBackEndEndPage",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/limits/frontEnd/btn/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    limitsFrontEndBtn
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "limitsFrontEndBtn",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/limits/frontEnd/page/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    limitsFrontEndPage
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "limitsFrontEndPage",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/menu/menu1/menu11/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    menuMenu11
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "menuMenu11",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/menu/menu1/menu12/menu121/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    menuMenu121
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "menuMenu121",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/menu/menu1/menu12/menu122/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    menuMenu122
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "menuMenu122",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/menu/menu1/menu13/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    menuMenu13
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "menuMenu13",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/menu/menu2/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    menuMenu2
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "menuMenu2",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/pages/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    pagesIndex
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "pagesIndex",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/personal/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    personalIndex
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "personal",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

vue-admin-wonderful-next/src/views/system/user/index.vue

@@ -1,12 +1,21 @@
 <template>
   <div>
     systemUser
+    <el-input v-model="val"></el-input>
   </div>
 </template>
 
 <script lang="ts">
+import { toRefs, reactive } from "vue";
 export default {
   name: "systemUser",
-  setup() {},
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
 };
 </script>

vue-admin-wonderful-next/src/views/tools/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    toolsIndex
+    <el-input v-model="val"></el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "toolsIndex",
+  setup() {
+    const state = reactive({
+      val: "",
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>