Vue.JS - 主要布局组件和路由

Question

我有一个主布局组件（由一个固定的顶部标题和一个左侧菜单组成，其中包含由路由器链接组件创建的多个链接）和一个“动态”布局组件 谁是页面的核心。
我希望通过根据左侧菜单上单击的链接在不同组件上进行路由来更改我网站的中心。
为了做到这一点，我将路由器视图放在我的 App.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
   }
 ]
})

但它不起作用，我不明白为什么。因此，我需要帮助:)

Answer 1

假设你是Router-View，你有一个朋友叫Layout。你的朋友邀请你到她家一起看电影。你喜欢她，所以你不能等到开会那天晚上，你才意识到她没有给你她的地址。

这就是代码中发生的事情。 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>