0

当尝试使用 让子路由工作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。是什么赋予了？

4

1 回答 1

2

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

'/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
      }
    }
  }
})

现在，通过上面的配置，当你访问 /foo 时，Foo 的出口内不会渲染任何内容，因为没有匹配子路由。

更新：

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

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

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

于 2016-08-11T03:41:02.103 回答