aside 側邊欄 - daniel-qa/Vue GitHub Wiki

Aside 側邊欄

aside bar 是一個 component，屬於 Element UI 組件; < Sidebar /> 和 < router-view /> 會搭配使用, (透過 < /router-link>)

  • 1 . 設置 Vue Router

在 src/router 目錄中的 index.js 文件，並添加以下代碼：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
  • 2 . 創建視圖組件

在 src/views 目錄中，創建三個文件：Home.vue、About.vue 和 Contact.vue。

Home.vue：

<template>
  <div>
    <h1>首頁</h1>
    <p>這是首頁內容。</p>
  </div>
</template>

About.vue：

<template>
  <div>
    <h1>關於我們</h1>
    <p>這是關於我們的內容。</p>
  </div>
</template>

Contact.vue：

<template>
  <div>
    <h1>聯繫我們</h1>
    <p>這是聯繫我們的內容。</p>
  </div>
</template>
  • 3 . 創建 Sidebar 組件

在 src/components 目錄中創建 Sidebar.vue 文件，並添加以下代碼：

  <aside class="sidebar">
    <h2>側邊欄</h2>
    <ul>
      <li><router-link to="/">首頁</router-link></li>
      <li><router-link to="/about">關於我們</router-link></li>
      <li><router-link to="/contact">聯繫我們</router-link></li>
    </ul>
  </aside>
</template>

<style scoped>
.sidebar {
  width: 250px;
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
</style>
  • 4 . 修改 App.vue

在 src/App.vue 文件中，更新代碼如下：

<template>
  <div id="app">
    <Sidebar />
    <main class="content">
      <router-view />
    </main>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue';

export default {
  components: {
    Sidebar,
  },
};
</script>

<style>
#app {
  display: flex;
}

.content {
  flex: 1;
  padding: 20px;
}
</style>
  • 5 在 main.js 中註冊 Router

最後，在 src/main.js 文件中註冊 Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');
  • 6 . 啟動應用

在命令行中運行以下命令來啟動開發伺服器：

npm run serve
⚠️ **GitHub.com Fallback** ⚠️