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

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

@@ -9,57 +9,62 @@ export const dynamicRoutes = [
             title: '首页',
             isLink: '',
             isHide: false,
+            isKeepAlive: true,
             icon: 'iconfont icon-shouye'
         },
-        children: [
+        children: [{
-            {
             path: '/home',
             component: () => import('/@/views/home/index.vue'),
             meta: {
                 title: '首页',
                 isLink: '',
                 isHide: false,
+                isKeepAlive: true,
                 icon: 'iconfont icon-shouye'
             }
-            }
-        ]
         },
         {
             path: '/system',
-        component: () => import('/@/views/layout/index.vue'),
+            name: 'system',
+            component: () => import('/@/views/layout/routerView/parent.vue'),
             redirect: '/system/menu',
             meta: {
                 title: '系统设置',
                 isLink: '',
                 isHide: false,
-            icon: 'iconfont icon-xitongshezhi'
+                icon: 'iconfont icon-xitongshezhi',
+                isKeepAlive: true
             },
             children: [
                 {
                     path: '/system/menu',
+                    name: "systemMenu",
                     component: () => import('/@/views/system/menu/index.vue'),
                     meta: {
                         title: '菜单管理',
                         isLink: '',
                         isHide: false,
-                    icon: 'iconfont icon-caidan'
+                        icon: 'iconfont icon-caidan',
+                        isKeepAlive: true
                     }
                 },
                 {
                     path: '/system/user',
+                    name: "systemUser",
                     component: () => import('/@/views/system/user/index.vue'),
                     meta: {
                         title: '用户管理',
                         isLink: '',
                         isHide: false,
-                    icon: 'iconfont icon-icon-'
+                        icon: 'iconfont icon-icon-',
+                        isKeepAlive: false
                     }
                 }
             ]
         },
         {
             path: '/limits',
-        component: () => import('/@/views/docs/index.vue'),
+            component: () => import('/@/views/layout/routerView/parent.vue'),
             redirect: '/limits/frontEnd',
             meta: {
                 title: '权限管理',
@@ -70,7 +75,7 @@ export const dynamicRoutes = [
             children: [
                 {
                     path: '/limits/frontEnd',
-                component: () => import('/@/views/docs/index.vue'),
+                    component: () => import('/@/views/layout/routerView/parent.vue'),
                     redirect: '/limits/frontEnd/page',
                     meta: {
                         title: '前端控制',
@@ -80,7 +85,7 @@ export const dynamicRoutes = [
                     children: [
                         {
                             path: '/limits/frontEnd/page',
-                        component: () => import('/@/views/docs/index.vue'),
+                            component: () => import('/@/views/limits/frontEnd/page/index.vue'),
                             meta: {
                                 title: '页面权限',
                                 isLink: '',
@@ -89,7 +94,7 @@ export const dynamicRoutes = [
                         },
                         {
                             path: '/limits/frontEnd/btn',
-                        component: () => import('/@/views/docs/index.vue'),
+                            component: () => import('/@/views/limits/frontEnd/btn/index.vue'),
                             meta: {
                                 title: '按钮权限',
                                 isLink: '',
@@ -100,18 +105,127 @@ export const dynamicRoutes = [
                 },
                 {
                     path: '/limits/backEnd',
-                component: () => import('/@/views/docs/index.vue'),
+                    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/docs copy 1/index.vue'),
+            component: () => import('/@/views/fun/index.vue'),
             meta: {
                 title: '功能',
                 isLink: '',
@@ -121,7 +235,7 @@ export const dynamicRoutes = [
         },
         {
             path: '/pages',
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            component: () => import('/@/views/pages/index.vue'),
             meta: {
                 title: '页面',
                 isLink: '',
@@ -131,7 +245,7 @@ export const dynamicRoutes = [
         },
         {
             path: '/components',
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            component: () => import('/@/views/components/index.vue'),
             meta: {
                 title: '组件',
                 isLink: '',
@@ -141,7 +255,7 @@ export const dynamicRoutes = [
         },
         {
             path: '/chart',
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            component: () => import('/@/views/chart/index.vue'),
             meta: {
                 title: '大数据图表',
                 isLink: '',
@@ -150,8 +264,8 @@ export const dynamicRoutes = [
             }
         },
         {
-        path: '/docs1',
+            path: '/personal',
-        component: () => import('/@/views/docs copy 1/index.vue'),
+            component: () => import('/@/views/personal/index.vue'),
             meta: {
                 title: '个人中心',
                 isLink: '',
@@ -160,8 +274,8 @@ export const dynamicRoutes = [
             }
         },
         {
-        path: '/docs2',
+            path: '/tools',
-        component: () => import('/@/views/docs copy 2/index.vue'),
+            component: () => import('/@/views/tools/index.vue'),
             meta: {
                 title: '工具类集合',
                 isLink: '',
@@ -170,8 +284,8 @@ export const dynamicRoutes = [
             }
         },
         {
-        path: '/docs3',
+            path: '/link',
-        component: () => import('/@/views/docs copy 3/index.vue'),
+            component: () => import('/@/views/layout/routerView/parent.vue'),
             meta: {
                 title: '外链',
                 isLink: '',
@@ -181,17 +295,18 @@ export const dynamicRoutes = [
         },
         {
             path: '/iframe',
-        component: () => import('/@/views/docs copy 3/index.vue'),
+            component: () => import('/@/views/layout/routerView/iframe.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>
+    <router-view v-slot="{ Component, route }">
       <transition :name="setTransitionName" mode="out-in">
-      <keep-alive>
+        <keep-alive include="home,systemMenu">
           <component :is="Component" />
         </keep-alive>
       </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>