最后一个嵌套路由在挂载包含嵌套路由器的组件时抛出错误

Question

我对嵌套路由有奇怪的行为。

我在主视图上有一个组件，如果需要，会在其中显示嵌套路由。该组件通过 v-if 触发！

HomeFloater 内

<transition name="fadepage" mode="out-in" appear key="store.state.kidsGames">
     <HomeFloater v-if="store.state.homeFloter==true" ></HomeFloater>  
</transition>

KidsGameView 内

    <router-view  v-slot="{ Component }">  
         <transition name="slidefade" appear mode="out-in" >
           <component :is="Component" class="animated" :key="route.path" />
         </transition>
    </router-view>


 onMounted(() => {

      
      console.log("onMounted");
      router.push( {name:"NestedView1"} );

....

如果我现在浏览此组件内的不同嵌套视图，然后删除这些 parnet 组件，则所有未安装的挂钩都会按预期触发。

但是如果我现在再次显示这些父组件并想要显示第一个嵌套视图，则会触发最后一个视图的卸载并引发错误。我当然可以拦截这个，但是为什么会发生这种情况呢？

我可以在打开组件之前重置路由器中的嵌套路由吗？

如果我时常将 homeView 留在父路由器中，则不会发生这种情况。

Answer 1

重新渲染组件时，您似乎遇到了嵌套路由和卸载的问题。如果没有看到完整的代码和您遇到的具体错误消息，提供精确的解决方案有点困难。不过，我可以提供一些一般性建议，可能会帮助您解决这个问题。

1. 路由器视图键： 确保您在渲染嵌套视图的

   key

   处使用唯一的

   router-view

   。对于每个路线更改，

   key

   应该是唯一的，以强制重新安装组件。您已经在使用

   :key="route.path"

   ，这是一个很好的做法。

   <router-view v-slot="{ Component }">  
     <transition name="slidefade" appear mode="out-in">
       <component :is="Component" class="animated" :key="route.path" />
     </transition>
   </router-view>
   

2. 组件内的路线导航： 当您导航到同一组件内的不同路线时，请确保您使用的是

   this.$router.push

   而不是直接使用

   router.push

   。这可确保使用与组件关联的路由器实例。

   this.$router.push({ name: "NestedView1" });
   

3. 检查异步操作： 确保

   onUnmounted

   挂钩中没有可能导致意外行为的异步操作（例如 API 调用、promise）。如果您有异步操作，请确保在卸载组件时正确清理或取消它们。

4. 导航卫士： 如果您的嵌套视图具有导航防护（

   beforeRouteLeave

   等），请确保它们能够处理重用或重新安装组件时的情况。

没有有关错误或完整代码结构的更多具体细节，这些只是一般建议。如果问题仍然存在，请考虑提供更多详细信息或具体错误消息，以便我提供更有针对性的帮助。