使用:key保留路由过渡时，子路由切换致父视图重复刷新的问题

你在根RouterView上绑定:key="$route.path"来实现路由过渡，但切换子路由时父视图SomeViewBase.vue会被强制刷新、API重复调用，核心原因是根RouterView的key随子路由路径变化而更新，导致父组件被销毁重建。下面是两种针对性的解决办法：

方案一：给子路由的RouterView单独加key #

把过渡动画的key绑定到父视图内部的子RouterView上，而非根RouterView。这样父组件不会被重新渲染，只有子视图切换时触发过渡：

修改SomeViewBase.vue中的RouterView：

<template>
  <div>
    <div class="flex justify-between items-center">
      <!-- 父组件原有内容 -->
    </div>
    <!-- 给子路由视图绑定key，实现子路由切换时的过渡 -->
    <RouterView :key="$route.fullPath" />
  </div>
</template>

同时可以移除App.vue中根RouterView的:key属性，或者保留它用于顶级路由的过渡（此时顶级路由切换依然有动画，子路由切换不影响父组件）。

方案二：修改根RouterView的key为父路由标识 #

如果必须在根RouterView保留key来实现全局过渡，可以把key从$route.path改成父路由的路径标识，确保子路由切换时key不变：

修改App.vue中的RouterView：

<RouterView :key="$route.matched[0].path" />

$route.matched[0].path会取当前路由匹配的最上层父路由路径（比如切换/some-route/view/1和/some-route/update/1时，这个值都是/some-route），所以父组件不会被重建；当切换到其他顶级路由（比如/other-route）时，key变化，依然能触发过渡动画。

如果需要处理子路由参数变化的场景（比如从/some-route/view/1切换到/some-route/view/2），可以结合子视图的key绑定，或者把根key改成$route.matched.map(item => item.path).join('/')，确保父路由不变时key不变，同时子路由参数变化时子视图能正常刷新。

内容的提问来源于stack exchange，提问作者Farhan Ali