Question

我正在使用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>

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

Answer 1

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

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

我的意思是，不能在您的Vue应用程序中使用 router-view （已命名或未命名）中的路由器，而不会失去其他显示的视图路线，除非通过在子路线中对其进行定义。

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

我所做的事情已从路由器中删除，并在 router-view 所在的相同位置进行渲染，现在可以正常工作了！

希望有帮助。（甚至在几年后）

vue-router只更改其中一个命名视图而不影响其他视图

1 个答案: