其他 <router-view> 内的 <router-view> 组件（相同组件）答案

【问题标题】：<router-view> components inside other <router-view>s (same component)其他 <router-view> 内的 <router-view> 组件（相同组件）
【发布时间】：2020-09-06 19:36:13
【问题描述】：

我的应用程序中的嵌套<router-view>s 目前存在以下问题，我想知道这是否是正确的方法。

我有一个navigation.vue 路由组件，在路由器中配置了子路由。在这个组件中，我有多个 <router-view>s（在一个 v-for 循环中）。

每个路由器视图都有自己的链接，如果您单击它，包含路由器视图的单击容器将开始转换并显示内容（page.vue 组件）。要在确认导航之前触发转换，我会监听 beforeRouteUpdate() 钩子。

但是，我现在想在此导航中添加其他 navigation 组件，这样我就有了类似的东西：

<navigation>
    <page/>
    <page/>
    <navigation>
        <page/>
        <page/>
    </navigation>
    <page/>
</navigation>

打开子导航的钩子似乎可以工作-但是如果我尝试在第二级打开页面，导航组件无法获取属于自己的$refs。我看到调用了第一级导航的beforeRouteUpdate() 钩子。我认为这是意料之中的，因为它仍在后台，持有二级导航及其页面。

我该怎么做才能只在打开二级导航时使用它的功能？我应该在beforeRouteUpdate() 钩子中做一些检查，它们都被解雇了吗？我可能很困惑，因为我不知道该组件是否被重用或其他什么 - 在我的理解中它应该是该组件的第二个实例。

我也在<router-view>s 周围使用<keep-alive> - 所以如果这是一个问题并且事情与它不同，我也很高兴得到提示。

谢谢！

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

我是这样解决的：

beforeRouteUpdate() 两个钩子都被调用，所以我必须确定哪些现有导航应该完成这项工作。上层导航跳过了钩子。

如果导航位于当前路线的 $route.match 数组中，我还需要进行一些检查，以仅在 <router-view> 中呈现导航。

【讨论】：

【解决方案2】：

我不确定这是否能解决您的问题，但在this vue school video 中，他们谈到如果使用相同的组件，Vue 路由器并不总是能够接受更改。您可以通过向路由器视图添加一个密钥来处理它，例如<router-view :key=“$route.path” />。然后对路径的任何更改都会触发组件的重新加载。也许您可以尝试向嵌套的<router-view>s 添加键？

【讨论】：

谢谢！是的，我已经尝试过键入它们，但我没有看到任何区别，例如在 Vue 开发工具中。他们已经有键（transition-x-...），我认为是因为它们被包装在和组件中。但我会进一步检查。