问题

在项目开发中，有一个页面出现跳转其他页面不显示的问题，但刷新后页面时正常显示的，其他页面跳转该页面是可以展示的问题

分析

解决办法：
在router-view 中给路由添加key标识。
！！注意：有使用layout封装布局的，是在layout下的主页面中的 router-view 添加标识，不是在src根目录下main.vue中修改（在这个文件修改会造成每次切换路由导航标签都会收起）

<script setup lang="ts">
import { useTagsViewStore } from "@/store/modules/tagsView";

import { useRoute} from "vue-router";
const tagsViewStore = useTagsViewStore();

const route = useRoute();
const key = computed(() => {
  return route.path + Math.random();
});
</script>

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }" :key="key">
      <transition name="router-fade" mode="out-in">
        <keep-alive :include="tagsViewStore.cachedViews">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </section>
</template>

问：为什么要加 key 呢？

答：

• 在 Vue 中，当路由切换时，如果不添加 key 属性，Vue 会尝试复用相同组件实例，这可能导致一些不可预料的问题，特别是在复杂的布局下。因为复用组件实例可能会导致之前组件的状态和数据被保留，而不是重新渲染组件。
• 通过为 <router-view> 添加 key 属性，你告诉 Vue 在切换路由时强制销毁当前组件实例，并创建一个新的实例。这样做可以确保每次路由切换时都会重新渲染组件，从而避免页面空白的问题。
• 具体来说，为 <router-view> 添加 key 属性可以确保 Vue 在渲染路由组件时，根据 key 的不同值来判断是否创建新的组件实例，而不是尝试复用之前的组件实例。这样可以确保每次路由切换都会得到一个全新的组件实例，从而避免出现页面空白的情况。