vue.js - vue-router 仅更改命名 View 之一而不影响其他 View

Question

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

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>

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

Answer 1

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

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

我的意思是，不能在你的 Vue 应用程序中使用 router-view(命名或未命名)中的路由器而不丢失其他中的当前渲染 View 除非是通过在子路由中定义它。

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

我所做的是将其从路由器中移除，将其呈现在 router-view 所在的相同位置，未连接任何路由，现在按预期工作!

希望对您有所帮助。 (即使在几年后)