refactor(mobile): 重新设计移动端的缓存过程_重新定义路由路径分配方式

README.md

-<p>王小卤</p>
\ No newline at end of file
+王小卤
\ No newline at end of file

src/App.vue

 <template>
-  <router-view v-slot="{ Component }">
-    <keep-alive :include="cachedViews">
-      <component :is="Component"></component>
-    </keep-alive>
-  </router-view>
-  <back-to-up></back-to-up>
+  <router-view />
+  <back-to-up />
 </template>
 
 <script setup>
 import useSettingsStore from '@/store/modules/settings'
 import { handleThemeStyle } from '@/utils/theme'
-import { constantRoutes } from '@/router'
 onMounted(() => {
   nextTick(() => {
     // 初始化主题样式
     handleThemeStyle(useSettingsStore().theme)
   })
 })
-const cachedViews = ref([])
-constantRoutes.forEach(o => {
-  // 暂时只缓存第一层
-  if (o.meta?.keepAlive) {
-    cachedViews.value.push(o.name)
-  }
-})
-
 </script>

src/mobile/index.vue

+<template>
+  <router-view v-slot="{ Component }">
+    <keep-alive :include="cachedViews">
+      <component :is="Component"></component>
+    </keep-alive>
+  </router-view>
+</template>
+
+<script setup>
+import { constantMobileRoutes } from '@/router'
+// 递归判断有 children 往里走找到所有路由对象 meta 的 keepAlive 是 true 的然后返回 meta 同级的 name 名字的值，组成一个数组
+const cachedViews = []
+function getKeepAliveName(routes) {
+  routes.forEach((item) => {
+    if (item.meta?.keepAlive) {
+      cachedViews.push(item.name)
+    }
+    if (item.children) {
+      getKeepAliveName(item.children)
+    }
+  })
+}
+getKeepAliveName(constantMobileRoutes)
+</script>

src/mobile_views/promotion/plan/detail/index.vue → src/mobile/views/promotion/plan/detail/index.vue

@@ -108,7 +108,7 @@ const newExamined = ref(0) // 没有默认创建的新的
 const planDetail = ref({})
 const planList = ref([])
 const getPlanDetail = async () => {
-  const res = await getPlanDetailAPI(route.params.id)
+  const res = await getPlanDetailAPI(route.params.planId)
   planDetail.value = res.data.planInfo
   examined.value = res.data.examine?.id
 
@@ -222,7 +222,7 @@ const clickExamine = async () => {
       }
       newExamined.value = result.data.id
     }
-    router.push({ path: `/examine/${examined?.value || newExamined.value}` })
+    router.push({ path: `/m/examine/${examined?.value || newExamined.value}` })
   })
 }
 

src/mobile_views/promotion/plan/index.vue → src/mobile/views/promotion/plan/index/index.vue

@@ -2,7 +2,7 @@
   <div class="mobile-container">
     <van-nav-bar right-text="搜索"
       left-text="新增计划"
-      @click-left="$router.push('/promotion_add')"
+      @click-left="$router.push('/m/promotion_plan_editing')"
       @click-right="showSearch = true"
       placeholder
       fixed />
@@ -19,7 +19,7 @@
           <van-swipe-cell v-for="item in planList"
             :key="item.id">
             <van-cell :title="item.storeName"
-              :to="`/promotion_detail/${item.id}`">
+              :to="`/m/promotion_plan_detail/${item.id}`">
               <template #label>
                 <p class="employee">{{ item.employeeName }}</p>
                 <p v-if="item.planStatus === 0">未执行</p>
@@ -161,7 +161,7 @@
 <script setup>
 // 指定当前组件的名字
 defineOptions({
-  name: 'Mobile_promotion'
+  name: 'm_promotion_plan'
 })
 import { parseTime } from '@/utils'
 import { useDatePickerOptions } from '@/hooks'
@@ -372,7 +372,7 @@ const resetFn = () => {
 
 // 编辑计划
 const editPlan = (row) => {
-  router.push(`/promotion_add/${row.id}`)
+  router.push(`/m/promotion_plan_editing/${row.id}`)
 }
 
 // 删除计划

src/router/index.js

@@ -84,39 +84,45 @@ export const constantPCRoutes = [
 ]
 // 移动端 公共路由
 export const constantMobileRoutes = [
-  {
-    path: '/',
-    redirect: '/promotion'
-  },
   {
     path: '/login',
     component: () => import('@/views/login'),
     hidden: true
   },
   {
-    path: '/promotion',
-    component: () => import('@/mobile_views/promotion/plan/index'),
-    name: 'Mobile_promotion',
+    path: '/',
+    redirect: '/m'
+  },
+  {
+    path: '/m',
+    redirect: '/m/promotion_plan',
+    component: () => import('@/mobile/index'),
     hidden: true,
+    children: [
+      // 促销计划
+      {
+        path: 'promotion_plan', // 列表
+        component: () => import('@/mobile/views/promotion/plan/index'),
+        name: 'm_promotion_plan', 
         meta: { keepAlive: true } // 标记该路由需要缓存
       },
       {
-    path: '/promotion_detail/:id', // 促销计划详情页
-    component: () => import('@/mobile_views/promotion/plan/detail'),
-    name: 'Detail', 
-    hidden: true,
+        path: 'promotion_plan_detail/:planId', // 详情
+        component: () => import('@/mobile/views/promotion/plan/detail'),
+        name: 'm_promotion_detail',  
       },
       {
-    path: '/examine/:examineId', // 稽查任务页
-    component: () => import('@/mobile_views/promotion/examine'),
-    name: 'Examine',
-    hidden: true,
+        path: 'promotion_plan_editing/:planId?', // 增改
+        component: () => import('@/mobile/views/promotion/plan/editing'),
+        name:'m_promotion_editing', 
       },
+      // 稽查
       {
-    path: '/promotion_add/:planId?', // 新增促销计划页
-    component: () => import('@/mobile_views/promotion/plan/add-edit'),
-    name: 'AddAndEdit',
-    hidden: true,
+        path: 'examine/:examineId',
+        component: () => import('@/mobile/views/examine'),
+        name:'m_promotion_examine',
+      }
+    ]
   }
 ]
 
@@ -194,16 +200,9 @@ export const dynamicRoutes = [
   }
 ]
 
-// 判断移动端设置路由
-if (isMobile()) {
-  constantRoutes = constantMobileRoutes
-} else {
-  constantRoutes = constantPCRoutes
-}
-
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: [...constantRoutes],
+  routes: isMobile() ? [...constantMobileRoutes] : [...constantPCRoutes], // 移动端单独静态公共路由表
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition

src/views/bi/competitor/index.vue

 <template>
   <div class="app-container">
     <div class="container">
-      <el-tabs v-model="activeName" class="tabs">
+      <el-tabs v-model="activeName"
+        class="tabs">
         <el-tab-pane v-for="item in list"
           :label="item.name"
           :name="item.name">
-          <keep-alive>
           <component :is="item.component"></component>
-          </keep-alive>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -32,7 +31,7 @@ provide('activeName', activeName);
   lang="scss">
   .app-container {
 
-    .container{
+    .container {
       display: flex;
       flex-direction: column;
     }

vite.config.js

@@ -59,7 +59,6 @@ export default defineConfig(({ mode, command }) => {
           },
           pxtorem({
             rootValue({ file }) {
-              // ? 后面调整 vant 大小
               return 37.5;
             },
             propList: ['*'],