我正在開發一個簡單的儀表板。試圖使側邊欄靜態而只是主要部分動態。
成功地將側邊欄設為靜態，但 nuxt 鏈接的新頁面路由上的元素出現在側邊欄下，而不是主頁部分。
附注。我使用 bulma 作為我的 CSS 框架。
這是側面條形碼。
<template>
<div class="ml-6 mt-6">
<div class="columns is-gapless">
<div class="column is-one-fifth">
<aside class="menu">
<ul class="menu-list">
<li class="py-4">
<NuxtLink to="/dashboard">
Dashboard
</NuxtLink>
</li>
<li class="py-4">
<NuxtLink to="/clients">
Clients
</NuxtLink>
</li>
<li class="py-4">
<NuxtLink to="/projects">
Projects
</NuxtLink>
</li>
<li class="py-4">
<NuxtLink to="/invoice">
Invoice
</NuxtLink>
</li>
<li class="py-4">
<a>Proposal</a>
</li>
</ul>
</aside>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SideBar'
}
</script>
這是我試圖路由到的頁面之一的代碼。
<template>
<div>
<h1>
Testing Clients
</h1>
</div>
</template>
<script>
export default {
name: 'ClientS',
layout: 'sidebar'
}
</script>
在此處輸入圖片說明
我該怎么做才能使頁面上的內容顯示在主要部磁區域而不是側邊欄下方？
uj5u.com熱心網友回復：
<Nuxt />在側邊欄布局中包含一個組件。它指示頁面內容的加載位置。從檔案中了解更多資訊。
uj5u.com熱心網友回復：
您需要在 layouts 目錄中創建一個名為 sidebar 的布局檔案。在這個檔案中，你可以把你的側邊欄組件和<Nuxt/>組件作為你的頁面內容。
這是一個簡單的例子：
/layouts/sidebar.vue
<div>
<Sidebar />
<div>
<Nuxt />
</div>
</div>
uj5u.com熱心網友回復：
在最簡單的情況下，nuxt 專案中需要三個檔案。
- 布局檔案
在 /layout/... 目錄中。
defualt.vue 不需要添加到專案中，默認使用。是頁面運行的地方。
- 頁面檔案
在 /pages/... 目錄中。
此目錄中的任何 .vue 檔案默認使用 default.vue 布局。
- 側邊欄或任何布局檔案的組件
在 /components/... 目錄中
使用可以在這個目錄中創建任何 .vue 檔案，并在布局或頁面檔案中使用它的語法
帶有 bluma 的布局檔案示例：（根據自己的喜好創建 PanelNavbar 和 PanelSidebar 組件。）
<template>
<div>
<div >
<PanelNavbar />
</div>
<section >
<PanelSidebar />
<div >
<div >
</div>
<nuxt />
</div>
</section>
</div>
</template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395493.html
上一篇：在使用Nuxt/Vue或使用純JavaScript將資料提交到多個文本輸入后生成自定義唯一名稱
下一篇：如何在vuejs中$emit