router-view 加key，传参去登录，添加路由

2024-09-04 14:02:47 +08:00 · 2024-09-04 14:02:47 +08:00 · e0d0e5a618
parent ad682a2f78
commit e0d0e5a618
13 changed files with 177 additions and 59 deletions
--- 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">
--- 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

 /**
 * 登录
--- 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();
 })

--- 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')
+                },
+            ]
+        },
    ]


--- 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>
--- a/policeManagement/src/views/law/index.vue
+++ b/policeManagement/src/views/law/index.vue
@ -0,0 +1,9 @@
+<template>
+    <div>
+      <!-- 法制宣传 -->
+      法制宣传
+    </div>
+  </template>
+  
+  <script setup lang="ts"></script>
+  
--- 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>
--- a/policeManagement/src/views/police/index.vue
+++ b/policeManagement/src/views/police/index.vue
@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 警保风采 -->
+    警保风采
+  </div>
+</template>
+
+<script setup lang="ts"></script>
--- a/policeManagement/src/views/query/publicUnit.vue
+++ b/policeManagement/src/views/query/publicUnit.vue
@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 企事业单位 -->
+    企事业单位
+  </div>
+</template>
+
+<script setup lang="ts"></script>
--- a/policeManagement/src/views/query/weappUser.vue
+++ b/policeManagement/src/views/query/weappUser.vue
@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 微信小程序用户 -->
+    微信小程序用户
+  </div>
+</template>
+
+<script setup lang="ts"></script>
--- 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>
--- a/policeManagement/src/views/test/index.vue
+++ b/policeManagement/src/views/test/index.vue
--- a/policeManagement/src/views/warning/index.vue
+++ b/policeManagement/src/views/warning/index.vue
@ -0,0 +1,8 @@
+<template>
+  <div>
+    <!-- 三色预警 -->
+    三色预警
+  </div>
+</template>
+
+<script setup lang="ts"></script>