首页 文章

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

提问于
浏览 次
3

我有以下路由器配置：

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 组件而不是相应的路线（aka， 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 的路线时：

enter image description here

但 vue-devtools 的组件视图窗口如下所示：

enter image description here

突出显示的区域显示NO组件已加载到选项卡中 . 然后我尝试将 component 添加到父路由 /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>

这导致以下结果：

enter image description here

嗯 . 无法弄清楚接下来该做什么 . 任何人有任何指针？

vue.js vuejs2 vue-router

1 回答

  • 0

    当我路由到任何“/ package / [id]”路由时，它继续加载PackageUnselected组件而不是相应的路由（aka，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 . 当用户单击任何选项卡时，您只需要在 Packages 组件中的 @click -event上创建一个新路径 . 而已 .

    我创建了一个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...
    <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>
    回复于

相关问题