programing

vue-properties가 중첩된 경로에 템플릿을 렌더링하지 않음

prostudy 2022. 4. 22. 20:58
반응형

vue-properties가 중첩된 경로에 템플릿을 렌더링하지 않음

그래서 나는 다음과 같은 경로를 가지고 있다.

const routes = [{
    path: '/',
    component: Home,
    children: [
        {
            path: "/health"
            children: [
                {
                    path: 'overview'
                    component: Overview
                },
                {
                    path: 'blood',
                    component: Blood
                }
            ]
        }
    ]
}]

홈 컴포넌트에는 다음과 같은 것이 있다.

<template>
    <div id="home">
         <router-view></router-view>
    </div>
</template>

하지만 내가 그 곳으로 갈 때/health/overview그리고/health/blood구성 요소에 해당하는 템플릿은 렌더링되지 않는다.나는 앱을 확인했다.$route물체는 경로와 구성 요소를 정확하게 감지한다.템플릿만으로는 렌더링되지 않는다.나 또한 a를 가지고 있다.<router-view>나의App.vue그게 도움이 된다면

다중 중첩된 경로를 가질 수 없는가?아니면 내가 뭘 놓치고 있는 걸까?

건강 경로는 다음과 같아야 한다.

{
  path: 'health',     // not '/health'
  component: Health,  // this can just be a dummy component with a <router-view/>
  children: [...],
},

만약 당신이 필요 없다면Health어떤 이유로든 구성 요소(즉, 각 아동에 걸쳐 공유된 기능이나 템플릿이 없음)를 사용하면 건강 경로를 완전히 제거하고 대신 다음과 같이 교체할 수 있다.

{
  path: 'health/overview',
  component: Overview,
},
{
  path: 'health/blood',
  component: Blood,
},

참조URL: https://stackoverflow.com/questions/43510137/vue-router-wont-render-template-on-nested-route

반응형