vue-router 仅更改一个命名视图而不影响其他视图答案

【问题标题】：vue-router change only one of the named view without affecting the othersvue-router 仅更改一个命名视图而不影响其他视图
【发布时间】：2018-05-19 21:09:50
【问题描述】：

我正在使用 vue-router 进行测试并遇到这个问题，如果我有两个命名视图但我只想更改其中一个而不更改默认视图怎么办。目前我是这样做的：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        change: Bar,
      }
    }
    {
      path: '/foo/test1',
      components: {
        default: Foo,
        change: test1,
      }
    }

    //is it possible to do it something like this?
    {
      path: '/:foo/test1',
      components: {
        default: :foo//<--- how to keep default to whatever it previously have?
        change: test1
      }
    }

  ]
})

<router-view></router-view>
<router-view name="change"></router-view>

我想我可以通过动态匹配来做到这一点，获取当前路由名称并将其作为参数传递，但我需要保留当前默认路由（如某些表单输入），所以我宁愿只更改一个在不影响其他观点的情况下...请帮助...

【问题讨论】：

这种事情通常使用嵌套路由而不是命名视图来完成。

标签： vue.js vue-router

【解决方案1】：

我花了很长时间才找到有同样问题的人！

我相信你已经解决了它，但我认为当当前路由子级不使用命名的 router-view 时没有解决方案。

我的意思是，不能在您的 Vue 应用程序中使用 router-view（已命名或未命名）中的路由器，而不会丢失其他中的当前渲染视图路由，除非是通过在子路由中定义。

我所看到的是通过使用与父组件条目相同的组件并具有子组件条目，在同一个 router-view 中它不会丢失什么由父路由渲染。 [https://dev.to/berniwittmann/handling-dialogs-with-vue-router-29ji]

我所做的是将它从路由器中删除，将其渲染到 router-view 所在的位置，未连接任何路由，现在按预期工作！

希望对您有所帮助。（甚至几年后）

【讨论】：