perf: 优化 router-view 绑定 key 的方式
This commit is contained in:
parent
28edb3775a
commit
59a412ace3
@ -1,24 +1,16 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from "vue"
|
|
||||||
import { useRoute } from "vue-router"
|
|
||||||
import { useTagsViewStore } from "@/store/modules/tags-view"
|
import { useTagsViewStore } from "@/store/modules/tags-view"
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const tagsViewStore = useTagsViewStore()
|
const tagsViewStore = useTagsViewStore()
|
||||||
|
|
||||||
const key = computed(() => {
|
|
||||||
// 返回 route.path 和 route.fullPath 有着不同的效果,大多数时候 path 更通用
|
|
||||||
return route.path
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="app-main">
|
<section class="app-main">
|
||||||
<div class="app-scrollbar">
|
<div class="app-scrollbar">
|
||||||
<router-view v-slot="{ Component }">
|
<!-- key 采用 route.path 和 route.fullPath 有着不同的效果,大多数时候 path 更通用 -->
|
||||||
|
<router-view v-slot="{ Component, route }">
|
||||||
<transition name="el-fade-in" mode="out-in">
|
<transition name="el-fade-in" mode="out-in">
|
||||||
<keep-alive :include="tagsViewStore.cachedViews">
|
<keep-alive :include="tagsViewStore.cachedViews">
|
||||||
<component :is="Component" :key="key" />
|
<component :is="Component" :key="route.path" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user