vue-router 只更改一个命名视图而不影响其他视图 [英] vue-router change only one of the named view without affecting the others

问题描述

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

I am testing with vue-router and come across this problem, what if i have two named views but i only want to change one of it without changing the default view. Currently I do it like this:

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>

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

I think i can do this with dynamic matching, get the current route name and pass it as param, but I need to keep the current default route (like some form inputs), so i'd rather want to change only one of the views without affecting the others... please help...

推荐答案

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

I took long to find someone with the same problem!

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

I believe you solved it already but I think there is no solution when the named router-view isn't to be used by current route children.

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

What I mean is, can't use in your Vue app a router in a router-view (named or not) without loosing the current rendered view in other route unless it is through defining it in children route.

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

What I've seen was by using the same component as parent component entry and has children components entry, in the same router-view it doesn't loose what was rendered by parent route. [https://dev.to/berniwittmann/handling-dialogs-with-vue-router-29ji]

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

What I did was removed it from the router, render it in the same place where the router-view was, unattached from any route, now is working as intended!

希望有帮助.(即使几年后)

Hope it helps. (even after some years later)

这篇关于vue-router 只更改一个命名视图而不影响其他视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！