기본 자식이 있는 Vue.js 중첩 라우팅

기본 자식이 있는 Vue.js 중첩 라우팅

Vue.js 2의 디폴트자녀 루트에 문제가 있습니다.

처음에 localhost/listings에 접속하면 index.vue와 맵이 올바르게 로드됩니다.어렸을 때.

router-link to localhost/listings/1을 사용하여 탐색한 후 router-link to localhost/listings를 사용하여 다시 localhost/listings로 돌아가도 쇼는 로드됩니다.vue 템플릿이런 일이 일어나면 안 돼?

난 네비게이션 가드나 방해할 만한 건 없어이것을 수정할 방법이 있습니까?

내 경로:

window.router = new VueRouter({
    routes: [

        ...

        {
            path: '/listings',
            name: 'listing.index',
            component: require('./components/listing/index.vue'),
            children: [
                {
                    path: '',
                    component: require('./components/listing/map.vue')
                },
                {
                    path: ':id',
                    name: 'listing.show',
                    component: require('./components/listing/show.vue')
                }
            ]
        },

        ...

    ]
});

디폴트 자경로를 사용하는 경우 "father" 라우터에 이름을 붙이지 마십시오.따라서 대신:to="{name: 'listing.index'}"디폴트 자경로의 이름을 사용합니다(예::to="{name: 'listing.map'}").

코드는 다음과 같습니다.

window.router = new VueRouter({
routes: [

    ...

    {
        path: '/listings',
        component: require('./components/listing/index.vue'),
        children: [
            {
                path: '',
                name: 'listing.map'
                component: require('./components/listing/map.vue')
            },
            {
                path: ':id',
                name: 'listing.show',
                component: require('./components/listing/show.vue')
            }
        ]
    },

    ...

  ]
});

아이들을 다시 배치해보세요. 루트는 위에서 아래로 일치하는 순서로 발사되므로, 이것으로 해결이 될 것입니다.

window.router = new VueRouter({
    routes: [

    ...

    {
        path: '/listings',
        name: 'listing.index',
        component: require('./components/listing/index.vue'),
        children: [
            {
                path: ':id',
                name: 'listing.show',
                component: require('./components/listing/show.vue')
            }
            {
                path: '',
                component: require('./components/listing/map.vue')
            },
        ]
    },

    ...

  ]
});

좀 더 명확히 하기 위해서path: ''기본적으로는 '모두 삭제'로 기능합니다.이것은, 라우터가 상부에 있는 경우, 곧바로 검출되기 때문에, 라우터는 더 이상 라우터로 전파되지 않기 때문입니다.:id경로.

사용하고 있을 때named routes아이가 안에 있는 컴포넌트를 로드하려면 자녀의 이름 경로를 사용해야 합니다.
[ Navigation ]메뉴 링크에서 이름 루트를 사용하는 경우parent자경로가 아무것도 아닌 경우에도 자경로는 자동으로 로드되지 않습니다.
예를 들어 User 경로가 있고 기본적으로 구성 요소 내의 사용자 목록을 표시하려고 하므로 '/user' 경로로 이동할 때마다 사용자 목록을 하위 경로로 로드하려고 합니다.

routes: [
   {
     path: '/user',
     name: 'User',
     component: User,
     children: [
       {path: '', name: 'UserList', component: UserList}, // <== child path is = '';
     ]
   }
  ]

코드에 대해서 생각해 보면, 부모 및 자녀의 패스가 같기 때문에, 「User」라고 하는 이름의 루트로 이동하면, 거기에 UserList도 입력될 가능성이 있습니다.그렇지 않고 사용자 목록'을 선택해야 합니다.왜 이런 일이 일어나는 거죠?Vuejs는 URL이 아니라 참조하는 컴포넌트를 로드하기 때문입니다.이것을 실제로 테스트할 수 있습니다.링크에서 이름 있는 루트를 사용하는 대신 URL을 참조하면 됩니다.이번에는 vuejs가 부모와 아이를 문제없이 로드합니다만, 이름 있는 루트를 사용하면 URL은 표시되지 않고 참조하고 있는 컴포넌트가 로드됩니다.

Vue 2.6.11에서는 부모 루트가 히트했을 경우 자녀 루트로 자동 리다이렉트 할 수 있습니다.

const routes = [
  {
    name: 'parent',
    path: '/',
    component: Parent,

    children: [
      {
        name: 'parent.child',
        path: 'child',
        component: Child,
      }
    ],

    /**
    * @type {{name: string} | string} Target component to redirect to
    */
    redirect: {
      name: 'parent.child'
    }
  }
];

언급URL : https://stackoverflow.com/questions/40750846/vue-js-nested-routing-with-default-child