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

2024-12-23 13:43:51 +08:00 · 2021-01-21 00:18:30 +08:00 · 2021-01-21 00:18:30 +08:00 · df3f55a7c0
commit df3f55a7c0
parent e633bb7df6
26 changed files with 650 additions and 193 deletions
--- a/vue-admin-wonderful-next/src/router/index.ts
+++ b/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: [
-            {
-                path: '/home',
-                component: () => import('/@/views/home/index.vue'),
-                meta: {
-                    title: '首页',
-                    isLink: '',
-                    isHide: false,
-                    icon: 'iconfont icon-shouye'
-                }
+        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'),
-        redirect: '/system/menu',
-        meta: {
-            title: '系统设置',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-xitongshezhi'
        },
-        children: [
-            {
-                path: '/system/menu',
-                component: () => import('/@/views/system/menu/index.vue'),
-                meta: {
-                    title: '菜单管理',
-                    isLink: '',
-                    isHide: false,
-                    icon: 'iconfont icon-caidan'
-                }
+        {
+            path: '/system',
+            name: 'system',
+            component: () => import('/@/views/layout/routerView/parent.vue'),
+            redirect: '/system/menu',
+            meta: {
+                title: '系统设置',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-xitongshezhi',
+                isKeepAlive: true
            },
-            {
-                path: '/system/user',
-                component: () => import('/@/views/system/user/index.vue'),
-                meta: {
-                    title: '用户管理',
-                    isLink: '',
-                    isHide: false,
-                    icon: 'iconfont icon-icon-'
-                }
-            }
-        ]
-    },
-    {
-        path: '/limits',
-        component: () => import('/@/views/docs/index.vue'),
-        redirect: '/limits/frontEnd',
-        meta: {
-            title: '权限管理',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-quanxian'
-        },
-        children: [
-            {
-                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
-                        }
+            children: [
+                {
+                    path: '/system/menu',
+                    name: "systemMenu",
+                    component: () => import('/@/views/system/menu/index.vue'),
+                    meta: {
+                        title: '菜单管理',
+                        isLink: '',
+                        isHide: false,
+                        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-',
+                        isKeepAlive: 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: '/fun',
-        component: () => import('/@/views/docs copy 1/index.vue'),
-        meta: {
-            title: '功能',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-crew_feature'
-        }
-    },
-    {
-        path: '/pages',
-        component: () => import('/@/views/docs copy 1/index.vue'),
-        meta: {
-            title: '页面',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-fuzhiyemian'
-        }
-    },
-    {
-        path: '/components',
-        component: () => import('/@/views/docs copy 1/index.vue'),
-        meta: {
-            title: '组件',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-zujian'
-        }
-    },
-    {
-        path: '/chart',
-        component: () => import('/@/views/docs copy 1/index.vue'),
-        meta: {
-            title: '大数据图表',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-ico_shuju'
-        }
-    },
-    {
-        path: '/docs1',
-        component: () => import('/@/views/docs copy 1/index.vue'),
-        meta: {
-            title: '个人中心',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-gerenzhongxin'
-        }
-    },
-    {
-        path: '/docs2',
-        component: () => import('/@/views/docs copy 2/index.vue'),
-        meta: {
-            title: '工具类集合',
-            isLink: '',
-            isHide: false,
-            icon: 'iconfont icon-gongju'
-        }
-    },
-    {
-        path: '/docs3',
-        component: () => import('/@/views/docs copy 3/index.vue'),
-        meta: {
-            title: '外链',
-            isLink: '',
-            isHide: false,
-            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'
-        }
+        },
+        {
+            path: '/pages',
+            component: () => import('/@/views/pages/index.vue'),
+            meta: {
+                title: '页面',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-fuzhiyemian'
+            }
+        },
+        {
+            path: '/components',
+            component: () => import('/@/views/components/index.vue'),
+            meta: {
+                title: '组件',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-zujian'
+            }
+        },
+        {
+            path: '/chart',
+            component: () => import('/@/views/chart/index.vue'),
+            meta: {
+                title: '大数据图表',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-ico_shuju'
+            }
+        },
+        {
+            path: '/personal',
+            component: () => import('/@/views/personal/index.vue'),
+            meta: {
+                title: '个人中心',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-gerenzhongxin'
+            }
+        },
+        {
+            path: '/tools',
+            component: () => import('/@/views/tools/index.vue'),
+            meta: {
+                title: '工具类集合',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-gongju'
+            }
+        },
+        {
+            path: '/link',
+            component: () => import('/@/views/layout/routerView/parent.vue'),
+            meta: {
+                title: '外链',
+                isLink: '',
+                isHide: false,
+                icon: 'iconfont icon-caozuo-wailian'
+            }
+        },
+        {
+            path: '/iframe',
+            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'),
--- a/vue-admin-wonderful-next/src/theme/element.scss
+++ b/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 标签页
 ------------------------------- */
--- a/vue-admin-wonderful-next/src/views/chart/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/components/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/docs
+++ b/vue-admin-wonderful-next/src/views/docs
@ -1,3 +0,0 @@
-<template>
-  docs
-</template>
--- a/vue-admin-wonderful-next/src/views/docs
+++ b/vue-admin-wonderful-next/src/views/docs
@ -1,3 +0,0 @@
-<template>
-  docs
-</template>
--- a/vue-admin-wonderful-next/src/views/docs
+++ b/vue-admin-wonderful-next/src/views/docs
@ -1,3 +0,0 @@
-<template>
-  docs
-</template>
--- a/vue-admin-wonderful-next/src/views/fun/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue
+++ b/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>) => {
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/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) => {
--- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/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);
-      moveToCurrentTag();
+      // getTagsRefsIndex(to.path);
+      // moveToCurrentTag();
    });
    return {
      isActive,
--- a/vue-admin-wonderful-next/src/views/layout/routerView/iframe.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue
+++ b/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue
@ -1,11 +1,13 @@
 <template>
-  <router-view v-slot="{ Component }" :key="Math.random()">
-    <transition :name="setTransitionName" mode="out-in">
-      <keep-alive>
-        <component :is="Component" />
-      </keep-alive>
-    </transition>
-  </router-view>
+  <div>
+    <router-view v-slot="{ Component, route }">
+      <transition :name="setTransitionName" mode="out-in">
+        <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({
--- a/vue-admin-wonderful-next/src/views/limits/backEnd/btn/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/limits/backEnd/page/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/limits/frontEnd/btn/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/limits/frontEnd/page/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/menu/menu1/menu11/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/menu/menu1/menu12/menu121/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/menu/menu1/menu12/menu122/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/menu/menu1/menu13/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/menu/menu2/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/pages/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/personal/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/system/user/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/tools/index.vue
+++ b/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>