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

Question

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

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

我在我的路由器中捕获，将特定的 Url 附加到 vue 组件

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

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

Answer 1

假设您是一个 Router-View你有一个 friend 叫Layout .你的 friend 邀请你去她家一起看电影。你喜欢她，所以你等不及了，直到 session 之夜到来，你才意识到她没有给你她的地址。

这就是代码中发生的事情。 Router-view 知道它应该出现在布局中，但不知道在哪里。

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

上面的模板结构意味着<router-view>应该在 <layout> 中呈现在由 <slot> 确定的位置元素。未提供插槽，因此路由器 View 不知道应该在何处呈现它。

请阅读https://v2.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>