<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>