68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<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> |