Javascript 带vue的多路由器

我正在运行一个PHP应用程序，需要一些页面才能完全交换视图。我需要一个成熟的路由器，因为我需要利用历史模式API

使用Vue路由器执行类似操作非常简单：

const router = new VueRouter({
    routes: [
        { path: '/', component: DefaultView },
        { path: '/map', component: MapView }
    ]
});

在PHP中，我只需像这样加载路由器，并将PHP生成的后端数据传递给两个视图：

<router-view data="<?= $data ?>"></router-view>

这适用于一个页面，但是如果我想拥有另一个具有完全不同的路由集的页面，该怎么办？路由器需要知道它在哪一页上，以便区分不同的路由集

我或者需要检查道具中pass的URL，就像我已经在处理数据一样。我不确定如何从路由器读取道具数据

处理这个问题的好方法是什么？

您只需创建两个命名路由器视图

并将不同的数据传递给这些路由器视图

<router-view class="view one"></router-view> //default
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/map',
      components: {
        default: Foo2,
        a: Bar2,
        b: Baz2
      }
    }
  ]

---

但是这些不能独立导航吗？假设你有一个页面的两个部分，并且你想在其中独立导航，每个部分都是独立于其他部分进行路由的，这在这里不会发生吗？

routes: [
        { path: '/page1', component: page1,
          children: [
        {

          path: 'route1',
          component: route1
        },
        {

          path: 'route2',
          component: route2
        }
      ]

       },
        { path: '/page2', component: page2, ... }
    ]