vue3.0实现导航条

使用Vue 3.0实现导航条

创建导航组件

新建一个NavBar.vue文件，定义导航结构。以下是一个基础导航条示例：

<template>
  <nav class="navbar">
    <div class="navbar-brand">
      <router-link to="/">Logo</router-link>
    </div>
    <ul class="navbar-menu">
      <li v-for="item in navItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'NavBar',
  setup() {
    const navItems = ref([
      { name: 'Home', path: '/' },
      { name: 'About', path: '/about' },
      { name: 'Contact', path: '/contact' }
    ]);

    return { navItems };
  }
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background-color: #333;
  color: white;
}
.navbar-menu {
  display: flex;
  list-style: none;
  gap: 1rem;
}
.navbar-menu a {
  color: white;
  text-decoration: none;
}
.navbar-menu a:hover {
  text-decoration: underline;
}
</style>

集成Vue Router

确保已安装vue-router，并在main.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;

在App.vue中使用导航组件

将导航条嵌入到应用的主布局中：

<template>
  <NavBar />
  <router-view />
</template>

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

export default {
  components: { NavBar }
};
</script>

响应式导航（可选）

添加响应式功能，例如在小屏幕下显示汉堡菜单：

<template>
  <nav class="navbar">
    <div class="navbar-brand">
      <router-link to="/">Logo</router-link>
      <button @click="toggleMenu">☰</button>
    </div>
    <ul class="navbar-menu" :class="{ 'active': isMenuOpen }">
      <li v-for="item in navItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isMenuOpen = ref(false);
    const toggleMenu = () => {
      isMenuOpen.value = !isMenuOpen.value;
    };

    return { isMenuOpen, toggleMenu };
  }
};
</script>

<style scoped>
.navbar-menu {
  display: flex;
  list-style: none;
  gap: 1rem;
}
@media (max-width: 768px) {
  .navbar-menu {
    display: none;
    flex-direction: column;
  }
  .navbar-menu.active {
    display: flex;
  }
}
</style>

动态高亮当前路由

通过vue-router的useRoute钩子实现当前路由高亮：

<script>
import { ref } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const navItems = ref([
      { name: 'Home', path: '/' },
      { name: 'About', path: '/about' },
      { name: 'Contact', path: '/contact' }
    ]);

    const isActive = (path) => {
      return route.path === path;
    };

    return { navItems, isActive };
  }
};
</script>

<template>
  <li v-for="item in navItems" :key="item.path">
    <router-link :to="item.path" :class="{ 'active': isActive(item.path) }">
      {{ item.name }}
    </router-link>
  </li>
</template>

<style scoped>
.active {
  font-weight: bold;
  color: #42b983;
}
</style>

以上方法覆盖了基础导航条实现、路由集成、响应式设计及动态样式调整。