vue如何设置导航栏和侧边栏为公共页面

发布时间：2022-11-19 09:54:01 作者：iii
来源：亿速云阅读：268

Vue如何设置导航栏和侧边栏为公共页面

在Vue.js项目中，导航栏和侧边栏通常是多个页面共享的组件。为了提高代码的复用性和维护性，我们可以将这些公共组件提取出来，并在需要的地方进行引用。本文将详细介绍如何在Vue项目中设置导航栏和侧边栏为公共页面。

1. 项目结构

首先，我们需要规划好项目的目录结构。一个典型的Vue项目结构如下：

src/
├── assets/
├── components/
│   ├── NavBar.vue
│   ├── SideBar.vue
├── views/
│   ├── Home.vue
│   ├── About.vue
│   ├── Contact.vue
├── App.vue
├── main.js
├── router.js

在这个结构中，components/目录用于存放公共组件，如导航栏（NavBar.vue）和侧边栏（SideBar.vue）。views/目录则用于存放各个页面组件。

2. 创建导航栏和侧边栏组件

2.1 导航栏组件 (`NavBar.vue`)

导航栏通常位于页面的顶部，包含一些导航链接。我们可以创建一个简单的导航栏组件：

<template>
  <nav>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
      <li><router-link to="/contact">Contact</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'NavBar'
}
</script>

<style scoped>
nav {
  background-color: #333;
  padding: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  margin-right: 20px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>

2.2 侧边栏组件 (`SideBar.vue`)

侧边栏通常位于页面的左侧或右侧，包含一些额外的导航链接或功能。我们可以创建一个简单的侧边栏组件：

<template>
  <aside>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
      <li><router-link to="/contact">Contact</router-link></li>
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'SideBar'
}
</script>

<style scoped>
aside {
  background-color: #f4f4f4;
  width: 200px;
  padding: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>

3. 在App.vue中引入公共组件

接下来，我们需要在App.vue中引入导航栏和侧边栏组件，并将它们作为公共组件使用。

<template>
  <div id="app">
    <NavBar />
    <div class="container">
      <SideBar />
      <router-view />
    </div>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import SideBar from './components/SideBar.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    SideBar
  }
}
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.container {
  display: flex;
  flex: 1;
}

router-view {
  flex: 1;
  padding: 20px;
}
</style>

在这个App.vue文件中，我们引入了NavBar和SideBar组件，并将它们放置在页面的顶部和左侧。<router-view />是Vue Router的占位符，用于渲染当前路由对应的页面组件。

4. 配置路由

为了能够在不同的页面中共享导航栏和侧边栏，我们需要配置Vue Router。在router.js文件中，我们可以定义路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
})

在这个路由配置中，我们定义了三个路由：/、/about和/contact，分别对应Home.vue、About.vue和Contact.vue页面组件。

5. 创建页面组件

5.1 首页 (`Home.vue`)

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
h1 {
  color: #333;
}
</style>

5.2 关于页面 (`About.vue`)

<template>
  <div>
    <h1>About</h1>
    <p>This is the about page.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style scoped>
h1 {
  color: #333;
}
</style>

5.3 联系页面 (`Contact.vue`)

<template>
  <div>
    <h1>Contact</h1>
    <p>Get in touch with us!</p>
  </div>
</template>

<script>
export default {
  name: 'Contact'
}
</script>

<style scoped>
h1 {
  color: #333;
}
</style>

6. 运行项目

完成以上步骤后，我们可以运行项目并查看效果。导航栏和侧边栏将作为公共组件出现在每个页面中，而页面内容则根据路由动态变化。

npm run serve

7. 进一步优化

7.1 动态侧边栏

在某些情况下，我们可能希望侧边栏的内容根据当前页面动态变化。可以通过在侧边栏组件中使用$route对象来实现：

<template>
  <aside>
    <ul>
      <li v-for="link in links" :key="link.path">
        <router-link :to="link.path">{{ link.name }}</router-link>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'SideBar',
  data() {
    return {
      links: [
        { path: '/', name: 'Home' },
        { path: '/about', name: 'About' },
        { path: '/contact', name: 'Contact' }
      ]
    }
  }
}
</script>

7.2 响应式布局

为了在不同设备上获得更好的用户体验，我们可以使用CSS媒体查询来实现响应式布局。例如，在小屏幕设备上隐藏侧边栏：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  aside {
    width: 100%;
    display: none;
  }
}

7.3 使用Vuex管理状态

如果导航栏或侧边栏的状态需要跨组件共享，可以考虑使用Vuex来管理状态。例如，我们可以使用Vuex来管理侧边栏的展开/折叠状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isSidebarOpen: true
  },
  mutations: {
    toggleSidebar(state) {
      state.isSidebarOpen = !state.isSidebarOpen
    }
  },
  actions: {
    toggleSidebar({ commit }) {
      commit('toggleSidebar')
    }
  }
})

然后在侧边栏组件中使用Vuex状态：

<template>
  <aside :class="{ 'open': isSidebarOpen }">
    <ul>
      <li v-for="link in links" :key="link.path">
        <router-link :to="link.path">{{ link.name }}</router-link>
      </li>
    </ul>
    <button @click="toggleSidebar">Toggle Sidebar</button>
  </aside>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'SideBar',
  computed: {
    ...mapState(['isSidebarOpen'])
  },
  methods: {
    ...mapActions(['toggleSidebar'])
  }
}
</script>

<style scoped>
aside {
  width: 200px;
  padding: 10px;
  transition: width 0.3s;
}

aside.open {
  width: 200px;
}

aside:not(.open) {
  width: 50px;
}
</style>

8. 总结

通过将导航栏和侧边栏设置为公共组件，我们可以大大提高Vue项目的代码复用性和维护性。本文详细介绍了如何在Vue项目中实现这一目标，包括创建组件、配置路由、优化布局以及使用Vuex管理状态。希望这些内容能帮助你更好地组织和管理Vue项目中的公共组件。