Vue.JS

Question

我有一个 主布局组件 （由固定的顶部 header 和一个左侧菜单组成，其中包含 router-link 组件创建的多个 link ) 和一个 "dynamic" 布局组件，它是页面的底部。
我希望通过根据左侧菜单上单击的 link 在不同的组件上进行路由来更改我网站的中心。
为了做到这一点，我将 router-view 放在我的 App.vue 中，它是我应用程序中更高级别的 Vue 组件，如以下代码所示：

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

这是我的主要布局组件，其中包含 header 和左侧菜单，这是我网站的固定部分：

<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 并且你有一个朋友叫 Layout。你的朋友邀请你去她家一起看电影。你喜欢她，所以你等不及了，直到会议之夜到来，你才发现她没有给你她的地址。

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

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

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

详情请阅读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>

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

Vue.JS - Main layout component and routing

javascript

vue-router

vue-component

vuejs2