Vue Router 移动到路由但加载了错误的组件

Question

我有以下路由器配置：

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'notselected',
      component: PackageUnselected
    },
    {
      path: '/package/:id',
      children: [
        { path: 'meta', name: 'packageMeta', component: ViewPackageMeta },
        { path: 'readme', name: 'packageReadme', component: PackageReadme },
        { path: 'docs', name: 'packageDocs', component: PackageDocs },
        {
          path: 'playground',
          name: 'packagePlayground',
          component: PackagePlayground
        }
      ]
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
});

当我在根路由时，它正确地将路由名称标识为notselected. 当我路由到任何“/package/[id]”路由时，它会继续加载PackageUnselected组件而不是适当的路由（又名ViewPackageMeta、PackageDocs、 等）。

现在，在 DOM 中我希望路由插入路由组件的位置，我有以下模板：

<v-tab-item v-for="item in tabs" :id="'tab-item-' + item" :key="item" exact>
  item: {{item}}
  <router-view :selectedPackage="selected"></router-view>
</v-tab-item>

而且因为我已经安装，vuex-router-sync所以很容易在任何给定时间查看路由状态。所以当点击应该加载的路线时PackageDocs：

但是vue-devtools的组件视图窗口是这样的：

突出显示的区域显示没有组件已加载到选项卡中。然后我尝试在父路由的定义中添加一个组件/package/:id：

{
  path: '/package/:id',
  component: Packages,
  children: [
    { path: 'meta', name: 'packageMeta', component: ViewPackageMeta },
    { path: 'readme', name: 'packageReadme', component: PackageReadme },
    { path: 'docs', name: 'packageDocs', component: PackageDocs },
    {
      path: 'playground',
      name: 'packagePlayground',
      component: PackagePlayground
    }
  ]
},

然后我必须为以下对象创建世界上最简单的组件Packages：

<template>
  <view-router-view></view-router-view>
</template>

这导致以下结果：

嗯。想不出接下来要做什么。有人有任何指示吗？

Answer 1

当我路由到任何“/package/[id]”路由时，它会继续加载 PackageUnselected 组件而不是适当的路由（又名 ViewPackageMeta、PackageDocs 等）。

这是 vue-router 的正确行为。

仅当 URL 路径为以下情况时才能加载子项：

• /package/[id]/meta
• /package/[id]/readme
• /package/[id]/playground
• /package/[id]/docs

如果您配置了选项，则父路径可能没有定义组件redirect，并且打开的用户/package/[id]将被重定向到您的默认路径（可以是任何路径）。

让我们转到问题的下一部分......

<v-tab-item v-for="item in tabs" :id="'tab-item-' + item" :key="item" exact>
  item: {{item}}
  <router-view :selectedPackage="selected"></router-view>
</v-tab-item>

您不需要在这里创建 4 个不同的<router-view>标签，您只需要一个所有子组件都将显示 html 代码的标签。

<v-tab-item v-for="item in tabs" :id="'tab-item-' + item" :key="item" exact></v-tab-item>
<router-view></router-view>

现在你将只有一个，router-view而且就是这个default。当用户单击任何选项卡时，您只需要在组件中的事件this.$router.push上添加一个新路径。就是这样。@clickPackages

我创建了一个简单的示例（codepen）来演示如何解决此任务：

<v-tab-item v-for="item in tabs" :id="'tab-item-' + item" :key="item" exact>
  item: {{item}}
  <router-view :selectedPackage="selected"></router-view>
</v-tab-item>

<v-tab-item v-for="item in tabs" :id="'tab-item-' + item" :key="item" exact></v-tab-item>
<router-view></router-view>