Vue.JS - 기본 레이아웃 구성 요소 및 라우팅

Vue.JS - 기본 레이아웃 구성 요소 및 라우팅

나는 메인 레이아웃 구성요소(고정된 상단 헤더와 라우터 링크 구성요소에 의해 만들어진 다중 링크가 있는 왼쪽 메뉴에 의해 구성되는 구성 요소)와 페이지의 끝부분인 "동적" 레이아웃 구성요소를 가지고 있다.
나는 이것을 왼쪽 메뉴의 클릭된 링크에 따라 다른 구성요소를 라우팅하여 내 사이트의 중심을 변경하고 싶다.
이를 위해 내 앱에 라우터 보기를 배치했다.다음 코드와 같이 내 앱에서 Vue 구성 요소의 상위 수준인 Vue:

<template>
  <div id="app">
    <layout>
      <router-view/>
    </layout>
  </div>
</template>

머리글과 왼쪽 메뉴를 포함하는 메인 레이아웃 구성요소가 있으며, 이것은 내 웹사이트의 고정된 부분이다.

<template>
 <v-app>
   <loader></loader>
   <v-layout row wrap>
     <v-flex xs12>
       <stickyHeader></stickyHeader>
     </v-flex>
     <v-flex xs2>
       <sideNavMenu></sideNavMenu>
     </v-flex>
   </v-layout>
 </v-app>
</template>

내 sideNavMenu 구성 요소에는 이와 같은 여러 라우터 링크 구성 요소가 포함됨

<router-link to="/home">Accueil</router-link>

특정 URL을 vue 구성 요소에 연결하기 위해 라우터에서 검색하는 중

export default new Router({
  routes: [
   {
     path: '/home',
     name: 'home',
     component: home
   }
 ]
})

하지만 효과가 없고, 왜 그런지 이해가 안 가.따라서 나는 도움이 필요하다 :)

상상해보라.Router-View그리고 너는 친구가 있다.Layout너의 친구는 함께 영화를 보기 위해 너를 그녀의 집으로 초대한다.너는 그녀를 좋아하니 회의날 밤이 올 때까지 기다릴 수 없고 그녀가 주소를 알려주지 않았다는 것을 알게 될 거야.

그게 암호에서 일어나는 일이야.라우터 뷰는 레이아웃에 표시되어야 한다는 것을 알고 있지만 어디에 표시되는지는 모른다.

<layout>
  <router-view/>
</layout>

위와 같은 템플릿 구조는 다음을 의미한다.<router-view>에 제공되도록 되어 있다.<layout>…이 정한 곳에<slot>원소의슬롯이 제공되지 않기 때문에 라우터 뷰는 슬롯이 정확히 렌더링되어야 하는 위치를 알지 못한다.

자세한 내용은 https://vuejs.org/v2/guide/components-slots.html을 참조하십시오.

예를 들어 여기에 배치하십시오.

<template>
 <v-app>
   <loader></loader>
   <v-layout row wrap>
     <v-flex xs12>
       <stickyHeader></stickyHeader>
     </v-flex>
     <v-flex xs2>
       <sideNavMenu></sideNavMenu>
     </v-flex>
     <slot />
   </v-layout>
 </v-app>
<template>

참조URL: https://stackoverflow.com/questions/50329640/vue-js-main-layout-component-and-routing