Vue.JS - 主要布局组件和路由-Java 学习之路

我有一个 main layout component （由固定的顶部 Headers 组成，左侧菜单由路由器链接组件创建多个链接）和 "dynamic" layout component 谁是页面的炉灶 .
我希望这可以通过在左侧菜单上点击的链接在不同的组件上路由来更改我的网站的中心 .
为了做到这一点，我将路由器视图放在我的App.vue中，他是我应用程序中更高级别的Vue组件，如下面的代码所示：

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

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

<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
   }
 ]
})

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

1 回答

1
想象一下你是一个 Router-View 并且你有一个叫 Layout 的朋友 . 你的朋友邀请你到她家一起看电影 . 你喜欢她，所以你可以给你她的地址 .

这就是代码中发生的事情 . 路由器视图知道它应该显示在布局但不知道在哪里 .
```
<layout>
  <router-view/>
</layout>
```
上面的模板结构意味着 <router-view> 意图在由 <slot> 元素确定的位置 <layout> 中呈现 . 未提供插槽，因此路由器视图不知道应该在何处准确呈现 .

有关详细信息，请阅读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>
```
回复于 2024-04-26T13:43:40+08:00

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

1 回答

相关问题