当我将内容加载到另一个 <router-view> 时，如何防止 vue-router 替换加载到一个 <router-view> 中的内容？

Question

我的 Vue 应用程序包含两个主要的路由器视图：一个在模态框内，允许在所述模态框内加载内容，另一个在主页面内。我使用name 属性来区分它们。例如，routes.js 文件中的一段代码会将内容加载到模式中。

export default ({
    mode: 'history',
    routes: [
        {
            path: '/classComp/create',
            components: {
                modalView: createClass
            }
        }
    ]
})

基本上，我的问题是，当我将内容加载到路由器时，主页的路由器视图中的内容消失了。我知道大多数人使用 children 属性来解决这个问题，但在这种情况下这是不可行的。例如，用户可以按下侧边栏中的路由器链接按钮来加载表单以在模态中创建类。因此，按下此按钮的能力与加载或未加载到主页中的内容无关，因此创建children 属性是不可行的。

简而言之，如何让 vue-router 将内容加载到 modal 的 router-view 而不擦除主机箱的 router-view 的内容？

**编辑：**有人建议为此使用keep-alive，但我无法让它工作。这是一个可行的建议吗？如果是，我会怎么做？

Answer 1

再次考虑您的用例，我不认为嵌套路由是可行的。 除非你真的想要一个指向你的模态的路由，你可以使用类似portal-vue 的东西将模态推到另一个视图中。

如果您使用的是 vue 3，它带有一个完成类似功能的组件：Teleport

编辑 - 从 cmets 继续我们的对话

据我了解，门户网站允许您从一条路线一次将 HTML 插入两个不同的位置；我的问题是我需要同时加载 2 条路线。

你是对的，门户网站不会真的让你改变它。问题是 vue-router 不支持同时加载两条路由（除非一个是另一个的子）。您可以尝试几件事：

• 添加 modal 嵌套路由 (route.children)。这将允许您使用<router-view name="modal"> 而不会离开父视图。不过，我认为这没有多大意义。您可以使用router.addRoutes 以编程方式进行操作
• 有两个路由器和两个 v​​ue 应用。我不相信 vue-router 原生支持同时加载两条路由（除非一个是另一个的孩子）。但是，您可以为您的模态代码创建一个单独的 vue 实例。但是，这可能会根据您的应用程序设计引入复杂性。一个简单的例子：

const appRouter = new VueRouter({ ... })
const modalRouter = new VueRouter({ mode: 'abstract', ... })
Vue.prototype.$modalRouter = modalRouter
const mainApp = new Vue({ router: appRouter })

mainApp.mount('#app')

....
App.vue
-------
<template>
  <div id="app">
    <router-view></router-view>
    <div id="modal-app" v-pre>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    const modalApp = new Vue({ router: this.$modalRouter })
    modalApp.mount('#modal-app')
  }
}
</script>

您可以在应用中的任何位置调用this.$modalRouter.push 为其更新路线。

这两种解决方案对我来说似乎都有些老套。最简单的方法可能是根本不使用 vue-router。使用portal-vue，您可以从应用程序的任何位置将内容安装到您的模态中。您甚至可以使用Wormhole.open() 以编程方式完成。