Vue Router가 루트로 이동하지만 잘못된 컴포넌트를 로드함

Vue Router가 루트로 이동하지만 잘못된 컴포넌트를 로드함

라우터는 다음과 같이 설정되어 있습니다.

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>

그 결과, 다음과 같은 결과가 됩니다.

음. 다음에 뭘 해야 할지 모르겠어.조언해 줄 사람?

"/package/[id]" 루트로 라우팅하면 적절한 루트(일명 ViewPackageMeta, PackageDocs 등)가 아닌 PackageUnselected 컴포넌트가 계속 로드됩니다.

이것이 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요소.바로 그겁니다.

이 작업을 해결하는 방법을 설명하기 위해 간단한 예(코드펜)를 만들었습니다.

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>

언급URL : https://stackoverflow.com/questions/51451497/vue-router-moves-to-route-but-loads-wrong-component