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的定义中添加 component ：

{
  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组件中的@click事件上Packages创建新路径。就是这样。

我创建了一个simple example (codepen)来演示如何解决此任务：

Vue.use(VueRouter);

// Components
let MetaPackages = {
  mounted() { console.log('Mounted MetaPackages...'); },
  template: `<div>MetaPackages...</div>`,
};
let DocsPackages = {
  mounted() { console.log('Mounted DocsPackages...'); },
  template: `<div>DocsPackages...</div>`,
};
let ReadmePackages = {
  mounted() { console.log('Mounted ReadmePackages...'); },
  template: `<div>ReadmePackages...</div>`,
};
let Packages = {
  mounted() { console.log('Mounted Packages... ' + this.$route.path); },
  template: '<div>Packages (parent) screen...<br/><router-view></router-view></div>',
};

// Router
const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: "/packages/:id",
      component: Packages,
      children: [
        {path:"meta", component: MetaPackages},
        {path:"docs", component: DocsPackages},
        {path:"readme", component: ReadmePackages}
      ]
    }
  ]
});

// Vue instance
const vm = new Vue({
  el: '#app',
  router,
  components: {Packages, MetaPackages, DocsPackages, ReadmePackages}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"> 
  <router-link to="/packages/100/meta">Meta</router-link>
  <router-link to="/packages/100/docs">Docs</router-link>
  <router-link to="/packages/100/readme">Readme</router-link>
  <hr/>
  <router-view></router-view>
</div>

Vue Router移至路线，但加载了错误的组件

1 个答案: