'保安项目提交'

src/layout/components/AppMain.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="app-main">
+    <!---带动画 ，并且具备组件缓存-->
+    <router-view v-slot="{ Component, route }">
+      <component :is="Component" :key="route.path" />
+    </router-view>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { useStore } from "vuex";
+import { watch } from "vue";
+import { useRoute } from "vue-router";
+const store = useStore();
+const whiteList = ["editPassword", '/home',"/404", "401"];
+
+/*生成title */
+const getTitle = (route) => {
+  let title = "";
+  if (!route.meta) {
+    const pathArr = route.path.split("/");
+    title = pathArr[pathArr.length - 1];
+  } else {
+    title = route.meta.title;
+  }
+  return title;
+};
+
+const isTags = (path) => {
+  return !whiteList.includes(path);
+};
+
+const route = useRoute();
+
+watch(route, (to, from) => {
+  const { fullPath, meta, name, params, path, query } = to;
+  if (!isTags(to.path)) return;
+  //并不是所有页面都需要保存;
+  store.commit(
+    "app/addTagsViewList",
+    {
+      fullPath,
+      meta,
+      name,
+      params,
+      path,
+      query,
+      title: getTitle(to)
+    },
+    {
+      immediate: true
+    }
+  );
+  if (store.getters.tagsViewList.length > 12) {
+    store.commit("app/removeTagsView", {
+      type: "index",
+      index: 0
+    });
+    // return false;
+  }
+});
+</script>
+<style lang="scss" scoped>
+@import "@/styles/transition.scss";
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>