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 に答える