From e0d0e5a61800770fd2da6530b16438be395043f7 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Wed, 4 Sep 2024 14:02:47 +0800
Subject: [PATCH] =?UTF-8?q?router-view=20=E5=8A=A0key=EF=BC=8C=E4=BC=A0?=
 =?UTF-8?q?=E5=8F=82=E5=8E=BB=E7=99=BB=E5=BD=95=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

router-view 加key，传参去登录，添加路由
---
 .../src/components/layout/layout.vue          |  43 ++++----
 .../src/components/login/TelephoneLogin.vue   |  13 ++-
 policeManagement/src/router/index.ts          |  11 +-
 policeManagement/src/router/staticRouters.ts  | 101 ++++++++++++++----
 .../src/views/dashboard/index.vue             |   6 +-
 policeManagement/src/views/law/index.vue      |   9 ++
 policeManagement/src/views/login.vue          |  11 +-
 policeManagement/src/views/police/index.vue   |   8 ++
 .../src/views/query/publicUnit.vue            |   8 ++
 .../src/views/query/weappUser.vue             |   8 ++
 policeManagement/src/views/register.vue       |  10 +-
 policeManagement/src/views/test/index.vue     |   0
 policeManagement/src/views/warning/index.vue  |   8 ++
 13 files changed, 177 insertions(+), 59 deletions(-)
 create mode 100644 policeManagement/src/views/law/index.vue
 create mode 100644 policeManagement/src/views/police/index.vue
 create mode 100644 policeManagement/src/views/query/publicUnit.vue
 create mode 100644 policeManagement/src/views/query/weappUser.vue
 delete mode 100644 policeManagement/src/views/test/index.vue
 create mode 100644 policeManagement/src/views/warning/index.vue

diff --git a/policeManagement/src/components/layout/layout.vue b/policeManagement/src/components/layout/layout.vue
index 38befb7..f139d4e 100644
--- a/policeManagement/src/components/layout/layout.vue
+++ b/policeManagement/src/components/layout/layout.vue
@@ -24,30 +24,25 @@
       </a-menu> -->
       <!-- 动态生成菜单项 -->
       <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
-        <template v-for="route in menuRoutes">
-          <!--  -->
-          <a-menu-item v-if="route.name === 'dashboard'">
+        <template v-for="route in staticRouter">
+          <a-menu-item v-if="route.meta?.title === undefined && route.children">
             <router-link :to="`${route.children[0].path}`">
-              <pie-chart-outlined />
-              <span>{{ route.meta?.title }}</span>
+              <HomeOutlined v-if="route.name === 'dashboard'" />
+              <InsuranceOutlined v-if="route.name === 'police'" />
+              <SoundOutlined v-if="route.name === 'law'" />
+              <ApartmentOutlined v-if="route.name === 'warning'" />
+              <span>{{ route?.children[0]?.meta?.title }}</span>
             </router-link>
           </a-menu-item>
-          <a-sub-menu v-if="route.children && route.children.length && route?.name !== 'dashboard'" :key="route.path">
+          <a-sub-menu v-if="route.children && route.children.length && route?.meta?.title" :key="route.path">
             <template #title>
-              <pie-chart-outlined />
+              <MailOutlined />
               <span>{{ route.meta?.title }}</span>
             </template>
             <a-menu-item v-for="child in route.children" :key="child.path">
-              <router-link :to="`${route.path}${child.path}`">{{ child.meta?.title }}</router-link>
+              <router-link :to="`${route.path}/${child.path}`">{{ child.meta?.title }}</router-link>
             </a-menu-item>
           </a-sub-menu>
-          <!--  -->
-          <a-menu-item v-if="!route.children">
-            <router-link :to="route.path">
-              <pie-chart-outlined />
-              <span>{{ route.meta?.title }}</span>
-            </router-link>
-          </a-menu-item>
         </template>
       </a-menu>
     </a-layout-sider>
@@ -56,10 +51,14 @@
         <layout-header v-model:collapsed="collapsed" />
       </a-layout-header>
       <a-layout-content class="layout-content">
-        <router-view v-slot="{ Component, route }">
+        <!-- <keep-alive> 会缓存已经访问过的组件，当你再次访问同一个页面时，它会直接从缓存中加载，而不会触发重新渲染 -->
+        <!-- router-view 必须绑定一个key 否则就会出现 路由切换白屏的问题（路由切换后，页面不显示内容，刷新后正常显示），但是这样也会导致一个问题就是 会导致keep-alive失效、因为这种方式会强制刷新路由-->
+
+        <router-view v-slot="{ Component, route }" :key="route.path">
+          <!-- <router-view v-slot="{ Component, route }"> -->
           <transition appear name="fade-transform" mode="out-in">
             <keep-alive :include="keepAliveNames">
-              <component :is="Component" :key="route.fullPath" />
+              <component :is="Component" :key="route.path" />
             </keep-alive>
           </transition>
         </router-view>
@@ -69,9 +68,9 @@
 </template>
 
 <script setup lang="ts">
+import { InsuranceOutlined, HomeOutlined, SoundOutlined, MailOutlined, ApartmentOutlined, InboxOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
 import LayoutHeader from '@/components/layout/header/LayoutHeader.vue'
 import { computed } from 'vue'
-// import Sliber from '@/components/layout/sliber/sliber.vue'
 import { staticRouter } from '@/router/staticRouters'
 import { useRoute } from 'vue-router'
 const route = useRoute()
@@ -81,7 +80,10 @@ const route = useRoute()
 
 const selectedKeys = computed(() => [route.path])
 // 过滤出需要在菜单中显示的路由
-const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))
+// const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))
+// staticRouter.forEach((element) => {
+//   console.log(element.meta?.title)
+// })
 
 // 示例：动态控制缓存页面的名称
 // const keepAliveNames = ref(['index'])
@@ -90,7 +92,8 @@ import { ref } from 'vue'
 // 控制菜单折叠
 const collapsed = ref<boolean>(false)
 
-const keepAliveNames = ref<string[]>([])
+// const keepAliveNames = ref<string[]>(['Index', 'Register'])
+const keepAliveNames = ref<string[]>(['index', 'rindex'])
 </script>
 
 <style scoped lang="scss">
diff --git a/policeManagement/src/components/login/TelephoneLogin.vue b/policeManagement/src/components/login/TelephoneLogin.vue
index 13ff4e0..6817742 100644
--- a/policeManagement/src/components/login/TelephoneLogin.vue
+++ b/policeManagement/src/components/login/TelephoneLogin.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { FormInstance, message, notification } from 'ant-design-vue'
+import { FormInstance, notification } from 'ant-design-vue'
 import { Rule } from 'ant-design-vue/es/form'
 import { LoginParams } from '@/types/views/login.ts'
 import api from '@/axios'
@@ -24,7 +24,10 @@ import rsaUtil from '@/utils/rsaUtil.ts'
 import { TokenInfo } from '@/types/stores/userStore.ts'
 import { useUserStore } from '@/stores/modules/userStore.ts'
 import { useRouter } from 'vue-router'
-
+const props = defineProps<{
+  account: string
+  password: string
+}>()
 const userStore = useUserStore()
 const router = useRouter()
 
@@ -47,9 +50,11 @@ const loginParamsRule: Record<keyof LoginParams, Rule[]> = {
   ],
 }
 const loginParams = ref<LoginParams>({
-  accountOrTelephone: __APP_ENV.VITE_APP_ENV === 'development' ? 'ERwuf2' : '',
-  password: __APP_ENV.VITE_APP_ENV === 'development' ? '123456' : '',
+  accountOrTelephone: __APP_ENV.VITE_APP_ENV === 'development' ? '' : '',
+  password: __APP_ENV.VITE_APP_ENV === 'development' ? '' : '',
 })
+loginParams.value.accountOrTelephone = props.account
+loginParams.value.password = props.password
 
 /**
  * 登录
diff --git a/policeManagement/src/router/index.ts b/policeManagement/src/router/index.ts
index 4fd64a3..26bfa91 100644
--- a/policeManagement/src/router/index.ts
+++ b/policeManagement/src/router/index.ts
@@ -27,22 +27,19 @@ router.beforeEach(async (to, from, next) => {
         return next(from.fullPath)
     }
     //判断访问路径是不是白名单d
-    console.log('访问路径', to.path);
+    // console.log('访问路径', to.path);
 
     if (ROUTER_WHITE_LIST.includes(to.path)) {
         return next();
     } else {
+        //不在白名单内需要查看是否携带token 没有token需要返回登录页进行登录
         if (!userStore.getTokenInfo?.value) {
             await message.warn('未找到token，请重新登陆!')
             return next('/login');
         }
     }
-    //不在白名单内需要查看是否携带token 没有token需要返回登录页进行登录
-    // if (!userStore.getTokenInfo?.value) {
-    //     await message.warn('未找到token，请重新登陆!')
-    //     return next('/login');
-    // }
-    //放行
+
+
     return next();
 })
 
diff --git a/policeManagement/src/router/staticRouters.ts b/policeManagement/src/router/staticRouters.ts
index 244a79f..4b4774e 100644
--- a/policeManagement/src/router/staticRouters.ts
+++ b/policeManagement/src/router/staticRouters.ts
@@ -5,19 +5,10 @@ export const Layout = () => import("@/components/layout/layout.vue");
 export const staticRouter: RouteRecordRaw[] =
     [
         {
-            path: "/",
-            name: "/",
-            component: Layout,
-            redirect: "/dashboard",
-            children: []
-        },
-        {
-
-            path: '',
+            path: '/',
             name: 'dashboard',
             redirect: '/index',
             meta: {
-                title: '首页',
                 keepalive: true
             },
             component: Layout,
@@ -39,46 +30,112 @@ export const staticRouter: RouteRecordRaw[] =
 
         {
 
-            path: '',
-            name: 'register',
+            path: '/query-',
+            name: 'query-',
             meta: {
-                title: '注册',
+                title: '信息查询',
                 keepalive: true
             },
             component: Layout,
             children: [
                 {
-                    path: '/register',  // 这里使用相对路径而不是 '/register'
-                    name: '',
+                    path: 'public-unit',  // 这里使用相对路径而不是 '/register'
+                    name: 'public-unit',
                     meta: {
-                        title: '注册',
+
+                        title: '企事业单位',
                         keepalive: true
                     },
-                    component: () => import('@/views/register.vue')
+                    component: () => import('@/views/query/publicUnit.vue')
+                },
+                {
+                    path: 'weapp-user',  // 这里使用相对路径而不是 '/register'
+                    name: 'weapp-user',
+                    meta: {
+
+                        title: '微信小程序用户',
+                        keepalive: true
+                    },
+                    component: () => import('@/views/query/weappUser.vue')
                 },
             ]
         },
         {
-            //登录页面
             path: '/login',
             name: 'login',
             meta: {
-                // title: '登录',
-                // keepalive: true
+                keepalive: true
             },
             component: () => import('@/views/login.vue')
         },
 
         {
-            //登录页面
+
             path: '/register-index',
             name: 'register-index',
             meta: {
-                // title: '注册',
             },
             component: () => import('@/views/register.vue')
         },
 
+
+        {
+            path: '/law',
+            name: 'law',
+            meta: {
+
+            },
+            component: Layout,
+            children: [
+                {
+                    path: '/law-index',
+                    name: 'law-index',
+                    meta: {
+                        title: '法制宣传',
+                        keepalive: true
+                    },
+                    component: () => import('@/views/law/index.vue')
+                },
+            ]
+        },
+        {
+            path: '/police',
+            name: 'police',
+            meta: {
+
+            },
+            component: Layout,
+            children: [
+                {
+                    path: '/police-presence',
+                    name: 'police-presence',
+                    meta: {
+                        title: '警保风采',
+                        keepalive: true
+                    },
+                    component: () => import('@/views/police/index.vue')
+                },
+            ]
+        },
+        {
+            path: '/warning',
+            name: 'warning',
+            meta: {
+
+            },
+            component: Layout,
+            children: [
+                {
+                    path: '/early-warning',
+                    name: 'early-warning',
+                    meta: {
+                        title: '三色预警',
+                        keepalive: true
+                    },
+                    component: () => import('@/views/warning/index.vue')
+                },
+            ]
+        },
     ]
 
 
diff --git a/policeManagement/src/views/dashboard/index.vue b/policeManagement/src/views/dashboard/index.vue
index 37c2b98..a081747 100644
--- a/policeManagement/src/views/dashboard/index.vue
+++ b/policeManagement/src/views/dashboard/index.vue
@@ -1,6 +1,10 @@
 <template><div>111111</div></template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineOptions({
+  name: 'Index',
+})
+</script>
 
 <style scoped lang="scss"></style>
 <!-- <template>
diff --git a/policeManagement/src/views/law/index.vue b/policeManagement/src/views/law/index.vue
new file mode 100644
index 0000000..9c0df41
--- /dev/null
+++ b/policeManagement/src/views/law/index.vue
@@ -0,0 +1,9 @@
+<template>
+    <div>
+      <!-- 法制宣传 -->
+      法制宣传
+    </div>
+  </template>
+  
+  <script setup lang="ts"></script>
+  
\ No newline at end of file
diff --git a/policeManagement/src/views/login.vue b/policeManagement/src/views/login.vue
index 0ad4afd..66f9cda 100644
--- a/policeManagement/src/views/login.vue
+++ b/policeManagement/src/views/login.vue
@@ -10,7 +10,7 @@
         <div class="title">欢迎来到超级后台</div>
         <a-tabs class="account-tab" v-model:active-key="activeKey">
           <a-tab-pane :key="0" tab="账号登录">
-            <TelephoneLogin />
+            <TelephoneLogin :account="account" :password="password" />
           </a-tab-pane>
         </a-tabs>
         <div class="oauth">
@@ -38,8 +38,15 @@
 import { QqOutlined, WechatOutlined } from '@ant-design/icons-vue'
 import TelephoneLogin from '@/components/login/TelephoneLogin.vue'
 import { ref } from 'vue'
-
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const account = ref<string>('')
+const password = ref<string>('')
 const activeKey = ref(0)
+account.value = route.query.account as string
+password.value = route.query.password as string
+// console.log('Account:', account.value)
+// console.log('Password:', password.value)
 </script>
 
 <style lang="scss" scoped>
diff --git a/policeManagement/src/views/police/index.vue b/policeManagement/src/views/police/index.vue
new file mode 100644
index 0000000..e945637
--- /dev/null
+++ b/policeManagement/src/views/police/index.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 警保风采 -->
+    警保风采
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/policeManagement/src/views/query/publicUnit.vue b/policeManagement/src/views/query/publicUnit.vue
new file mode 100644
index 0000000..e4bdb28
--- /dev/null
+++ b/policeManagement/src/views/query/publicUnit.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 企事业单位 -->
+    企事业单位
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/policeManagement/src/views/query/weappUser.vue b/policeManagement/src/views/query/weappUser.vue
new file mode 100644
index 0000000..c66c3b6
--- /dev/null
+++ b/policeManagement/src/views/query/weappUser.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 微信小程序用户 -->
+    微信小程序用户
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/policeManagement/src/views/register.vue b/policeManagement/src/views/register.vue
index 63c9bc1..14b1ff7 100644
--- a/policeManagement/src/views/register.vue
+++ b/policeManagement/src/views/register.vue
@@ -83,7 +83,10 @@ import { message } from 'ant-design-vue'
 // import type { CascaderProps } from 'ant-design-vue';
 import api from '@/axios/index.ts'
 import type { ShowSearchType } from 'ant-design-vue/es/cascader'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, defineComponent } from 'vue'
+defineComponent({
+  name: 'Register',
+})
 onMounted(() => {
   getTree()
 })
@@ -282,7 +285,8 @@ const isLogin = ref<boolean>(false)
 // const searchCode = ref<string>()
 //
 const searchCode = reactive({
-  code: __APP_ENV.VITE_APP_ENV === 'development' ? 'dawda' : '',
+  // dawda
+  code: __APP_ENV.VITE_APP_ENV === 'development' ? '' : '',
 })
 
 const getCheckStatus = () => {
@@ -304,6 +308,6 @@ const getCheckStatus = () => {
     })
 }
 const toLogin = () => {
-  router.replace({ path: '/login' })
+  router.replace({ path: '/login', query: { password: password.value, account: account.value } })
 }
 </script>
diff --git a/policeManagement/src/views/test/index.vue b/policeManagement/src/views/test/index.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/policeManagement/src/views/warning/index.vue b/policeManagement/src/views/warning/index.vue
new file mode 100644
index 0000000..e0a2da1
--- /dev/null
+++ b/policeManagement/src/views/warning/index.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 三色预警 -->
+    三色预警
+  </div>
+</template>
+
+<script setup lang="ts"></script>