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