1.路由缓存。

src/layout/index.vue

@@ -8,10 +8,8 @@
             enter-active-class="animate__animated animate__fadeIn"
             mode="out-in"
           >
-            <keep-alive>
-              <div class="main-container">
-                <component :is="Component" :key="route.path" />
-              </div>
+            <keep-alive :include="['ProcessMain,ProSteps']">
+              <component :is="Component" :key="route.fullPath" />
             </keep-alive>
           </transition>
         </template>

src/router/index.ts

@@ -31,7 +31,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       {
         path: "process",
         component: () => import("@/views/process/main.vue"),
-        name: "process",
+        name: "ProcessMain",
 
         meta: {
           title: "process",
@@ -41,10 +41,11 @@ export const constantRoutes: RouteRecordRaw[] = [
       {
         path: "pro-steps",
         component: () => import("@/views/pro-steps/index.vue"),
-        name: "pro-steps",
+        name: "ProSteps",
         meta: {
           title: "pro-steps",
           icon: "homepage",
+          keepAlive: true,
           back: true,
         },
         children: [
@@ -52,9 +53,10 @@ export const constantRoutes: RouteRecordRaw[] = [
             path: "dianjian",
             component: () =>
               import("@/views/pro-steps/components/dianjian.vue"),
-            name: "dianjian",
+            name: "Dianjian",
             meta: {
               back: true,
+              keepAlive: true,
             },
           },
           {

src/views/pro-steps/components/Jiluxiang.vue

@@ -1,13 +1,13 @@
 <template>
   <!-- 记录项 -->
   <div>
-    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+    <el-input v-model="input" placeholder="Please input" style="width: 240px" />
   </div>
 </template>
 
 <script lang="ts" setup>
 defineOptions({
-  name: "Jialuxiang",
+  name: "Jiluxiang",
 });
 const input = ref("");
 onActivated(() => {

src/views/pro-steps/components/dianjian.vue

@@ -1,11 +1,11 @@
 <template>
-  <!-- 点检 -->
   <div>
-    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+    <el-input v-model="input" placeholder="Please input" style="width: 240px" />
   </div>
 </template>
 
 <script lang="ts" setup>
+defineOptions({ name: "Dianjian" });
 const input = ref("");
 </script>
 

src/views/pro-steps/index.vue

@@ -8,7 +8,12 @@
       <el-col :span="20" class="elColClasss">
         <div class="container">
           <div class="typeContainer">
-            <div v-for="(item, index) in stepComponents" :key="index" :class="getNameClass(index)" class="typeBox">
+            <div
+              v-for="(item, index) in stepComponents"
+              :key="index"
+              :class="getNameClass(index)"
+              class="typeBox"
+            >
               <router-link :to="{ name: item.path }">
                 <div class="svgIcon">
                   <svg-icon :icon-class="item.compentType" size="30" />
@@ -20,10 +25,9 @@
           <!-- 二级路由盒子 -->
           <div class="routerView">
             <router-view v-slot="{ Component, route }">
-              <keep-alive v-if="route.meta.keepAlive == true">
-                <component :is="Component" :key="route.name" />
+              <keep-alive include="Dianjian,Jiluxiang">
+                <component :is="Component" :key="route.fullPath" />
               </keep-alive>
-              <component v-else :is="Component" :key="route.name" />
             </router-view>
           </div>
         </div>
@@ -36,7 +40,9 @@
 import { onMounted } from "vue";
 import Jiluxiang from "@/views/pro-steps/Jiluxiang.vue";
 import { processViewStore } from "@/store";
+
 const store = processViewStore();
+defineOptions({ name: "ProSteps" });
 const route = useRoute();
 //配置标签信息Data
 const stepComponents = ref([
@@ -58,7 +64,7 @@ const stepComponents = ref([
   {
     compentName: "点检",
     compentType: "dianjian",
-    path: "dianjian",
+    path: "Dianjian",
   },
   {
     compentName: "设备记录",

src/views/process/main.vue

@@ -24,6 +24,8 @@ import Orders from "@/views/process/orders.vue";
 import Processes from "@/views/process/processes.vue";
 import CurrentProduction from "@/views/process/currentProduction.vue";
 import { getOrders } from "@/api/process";
+
+defineOptions({ name: "ProcessMain" });
 //未完成订单数组
 const ordersDataArray = ref([]);
 //未完成任务总数