Vue：导航栏制作（创建路由，跳转界面）

作者：CSDN @ _乐多_

本文将介绍vue导航栏制作的代码。

效果如下图所示，当鼠标点击导航栏后，导航栏选项背景会显示灰色并跳转界面。

---

---

一、创建一个新的Vue项目

vue create my-navigation-app

二、进入项目目录

cd my-navigation-app

三、创建 Navigation.vue

在src/components目录下创建一个新的组件Navigation.vue：
src/components/Navigation.vue:

<template>
  <nav>
    <ul>
      <li :class="{ active: activeRoute === '/' }"><router-link to="/">Home</router-link></li>
      <li :class="{ active: activeRoute === '/about' }"><router-link to="/about">About</router-link></li>
      <li :class="{ active: activeRoute === '/contact' }"><router-link to="/contact">Contact</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "Navigation",
  data() {
    return {
      activeRoute: null,
    };
  },
  created() {
    this.activeRoute = this.$route.path;
    this.$router.afterEach((to) => {
      this.activeRoute = to.path;
    });
  },
};
</script>

<style>
/* 添加一些样式以美化导航栏 */
nav {
  background-color: #f2f2f2;
  padding: 10px;
}

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

li {
  display: inline-block;
  margin-right: 10px;
}

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

/* 定义选中时的样式 */
.active {
  background-color: #ddd;
  color: #fff; /* 设置选中时的文字颜色 */
}
</style>

四、创建页面组件 Home.vue、About.vue 和 Contact.vue

在src/views目录下创建页面组件Home.vue、About.vue和Contact.vue：

4.1 src/views/Home.vue:

 
<template>
  <div>
    <h1>Home Page</h1>
    <!-- Add your home page content here -->
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

4.2 src/views/About.vue:

<template>
  <div>
    <h1>About Page</h1>
    <!-- Add your about page content here -->
  </div>
</template>

<script>
export default {
  name: "About",
};
</script>

4.3 src/views/Contact.vue:

<template>
  <div>
    <h1>Contact Page</h1>
    <!-- Add your contact page content here -->
  </div>
</template>

<script>
export default {
  name: "Contact",
};
</script>

五、更新App.vue

更新App.vue，使用导航栏组件和路由：
src/App.vue:

<template>
  <div id="app">
    <Navigation /> <!-- 使用导航栏组件 -->
    <router-view /> <!-- 这里会根据路由显示不同的页面 -->
  </div>
</template>

<script>
import Navigation from "@/components/Navigation.vue"; // 导入导航栏组件

export default {
  name: "App",
  components: {
    Navigation, // 注册导航栏组件
  },
};
</script>

六、在router/index.js中定义路由

在router/index.js中定义路由：
src/router/index.js:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";
import Contact from "@/views/Contact.vue";

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes,
});

export default router;

现在，你已经完成了一个带有导航栏和路由的简单Vue项目。记得在项目根目录运行npm run serve来启动开发服务器并预览你的项目。导航栏中的文字在选中时将会变色，并且你可以通过点击导航链接切换页面。

声明：
本人作为一名作者，非常重视自己的作品和知识产权。在此声明，本人的所有原创文章均受版权法保护，未经本人授权，任何人不得擅自公开发布。
本人的文章已经在一些知名平台进行了付费发布，希望各位读者能够尊重知识产权，不要进行侵权行为。任何未经本人授权而将付费文章免费或者付费（包含商用）发布在互联网上的行为，都将视为侵犯本人的版权，本人保留追究法律责任的权利。
谢谢各位读者对本人文章的关注和支持！