Vue Router 子路由未按预期工作

Question

当尝试使用 vue-router 使子路由工作时，我的子路由正在渲染父路由组件，而不是为该子路由声明的组件。看来父路由必须要声明一个组件，否则根本不会显示任何组件。例如，如果我这样声明我的路线：

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        subRoutes: {
            '/': {
                component: Station
            },
            '/create': {
                component: CreateStation
            }
        }
    },
});

任何路线都没有显示。但是如果我这样声明我的路线：

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        component: Station,
        subRoutes: {
            '/create': {
                component: CreateStation
            }
        }
    },
});

我的 stations/create 路线显示与 stations 路线相同的组件。给出了什么？

Answer 1

您仍然需要为 /stations 路由声明 root 组件，如下所示：

'/stations': {
    component: Station,
    subRoutes: {
        '/': {
            component: ListStations
        },
        '/create': {
            component: CreateStation
        }
    }
}

根据文档：

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
      '/bar': {
        // Bar will be rendered inside Foo's <router-view>
        // when /foo/bar is matched
        component: Bar
      },
      '/baz': {
        // Same for Baz, but only when /foo/baz is matched
        component: Baz
      }
    }
  }
})

Now, with the above configuration, when you visit /foo, nothing will be rendered inside Foo's outlet, because no sub route is matched.

更新：

当您创建子路径时，您是在告诉父组件（在本例中为 Station），它需要在其模板中托管一些组件。 Station 和 CreateStation 不是并排的，它们是父子关系（在路由方面）。

这就是为什么组件 Station 需要在其模板中有一个 router-view 元素，并且 ListStations 和 CreateStation 都会在其中呈现。

像这样：http://jsfiddle.net/naeg67da/329/

Vue Router 子路由未按预期工作

Vue Router sub-routes not working as expected

vue.js

vue-router