Vue.js에서 여러 라우터 뷰를 사용하는 방법 중 하나가 다른 컴포넌트 안에 있습니까?

Vue.js에서 여러 라우터 뷰를 사용하는 방법 중 하나가 다른 컴포넌트 안에 있습니까?

Vue.js 단일 페이지 어플리케이션을 사용하고 있는데, 이 어플리케이션에는 를 사용하는 메인 네비게이션바가 있습니다.<router-view/>다른 페이지를 렌더링합니다.

다음과 같은 경우:

<main-header/> <!-- navigation links -->
<transition name="slide-fade" mode="out-in">
  <router-view/> <!-- different pages -->
</transition>

이러한 페이지 중 하나에 더 많은 네비게이션 링크가 있는 사이드바가 있습니다.<router-link/>메인 내비게이션 바처럼요

다음과 같은 경우:

<sidebar/> <!-- navigation links -->
<div class="content">
  <transition name="slide-fade" mode="out-in">
    <router-view/> <!-- content beside the sidebar -->
  </transition>
</div>

사이드바 네비게이션 링크를 클릭하면 사이드바 옆에 있는 콘텐츠와 URL을 변경할 수 있습니다.그러나 사이드바를 잃어버리고 내용 섹션에서 렌더링할 구성요소만 가져옵니다.

원하는 결과를 얻으려면 어떻게 해야 합니까?여러 개를 사용하는 방법<router-view/>위의 예시와 같이 다른 컴포넌트 내부에 있는 것은 무엇입니까?

를 사용해야 합니다.named views. 를 제공하다name뷰에 귀속됩니다.

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>

다음과 같이 구성합니다.

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar
      }
    }
  ]
})

공식 문서를 참조해 주세요.

사이드바가 사라진 이유는 모든 컴포넌트가 첫 번째에 렌더링되기 때문입니다.<router-view>그 외에<main-header>.

네스트된 라우터를 사용하려면 , 다음의 설정을 실시해 주세요.children다음과 같이 사이드바 라우터에 배치됩니다.

const router = new VueRouter({
  routes: [
    { path: '/your-sidebar-url', component: your-sidebar-page,
      children: [
        {
          // A will be rendered in the second <router-view>
          // when /your-sidebar-url/a is matched
          path: 'a',
          component: A
        },
        {
          // B will be rendered in the second <router-view>
          // when /your-sidebar-url/b is matched
          path: 'b',
          component: B
        }
      ]
    }
  ]
})

네스트된 경로에 대한 자세한 정보

@adoug 답변이 도움이 되었습니다.

다만, 제 경우는, 양쪽의 라우터 뷰에 이름을 붙였습니다.

이 문제를 해결하기 위해 이렇게 했습니다.

<router-view name='a'/>
<router-view name='b'/>

당신의 내부 어딘가에 가 있습니다.FatherComponent.vue에 탑재된.a시간 좀 내줘

난 이걸 고치기 위해 이렇게 했어

const router = new VueRouter({
    routes: [
        { path: '/your-sidebar-url',
            components: {
                a: FatherComponent //you sidebar main component in 'a' name of routed-view
            },
            children: [
                {
                    // A will be rendered in the second <router-view>
                    // when /your-sidebar-url/a is matched
                    path: '/child-path/a',
                    components: {
                        b: ChildComponentA //note that 'b' is the name of child router view
                    }
                },
                {
                    // B will be rendered in the second <router-view>
                    // when /your-sidebar-url/b is matched
                    path: '/child-path/b',
                    components: {
                        b: ChildComponentB //note that 'b' is the name of child router view
                    }
                }
            ]
        }
    ]
})

명명된 루트 뷰

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/',
      // a single route can define multiple named components
      // which will be rendered into <router-view>s with corresponding names.
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/other',
      components: {
        default: Baz,
        a: Bar,
        b: Foo
      }
    }
  ]
})

new Vue({
    router,
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Named Views</h1>
  <ul>
    <li>
      <router-link to="/">/</router-link>
    </li>
    <li>
      <router-link to="/other">/other</router-link>
    </li>
  </ul>
  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>
</div>

https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views

언급URL : https://stackoverflow.com/questions/48111573/in-vue-js-how-to-use-multiple-router-views-one-of-which-is-inside-another-compon