首页/资讯中心/详情

例子：vue3+vite+router创建导航菜单

例子：vue3+vite+router创建导航菜单
📅 发布时间：2026/6/18 6:02:29

第一部分

1、初始化项目

npm init vite@latest

npm run dev ：运行项目

q+Enter：退出运行

image

image

 

 

 2、安装路由依赖

npm install vue-router@4  # Vue3 对应 vue-router 4.x 版本

 

第二部分：

创建页面组件

在 src/views 目录下创建三个页面组件：
  1. 首页（HomeView.vue）
<template><div class="page home-page"><h2>首页</h2><p>这是网站首页内容</p></div>
</template><style scoped>
.page {padding: 20px;
}
.home-page {background-color: #f0f9ff;
}
</style>
  1. 关于页（AboutView.vue）
<template><div class="page about-page"><h2>关于我们</h2><p>这是关于页面内容</p></div>
</template><style scoped>
.page {padding: 20px;
}
.about-page {background-color: #fff0f0;
}
</style>
  1. 文档页（DocView.vue）
<template><div class="page doc-page"><h2>文档中心</h2><p>这是文档页面内容</p></div>
</template><style scoped>
.page {padding: 20px;
}
.doc-page {background-color: #f0fff4;
}
</style>

创建导航组件

在 src/components 目录下创建导航栏组件 Navbar.vue
<template><nav class="navbar"><!-- 路由链接：点击切换页面，无需刷新 --><router-link to="/" class="nav-item" active-class="active">首页</router-link><router-link to="/about" class="nav-item" active-class="active">关于</router-link><router-link to="/doc" class="nav-item" active-class="active">文档</router-link></nav>
</template><style scoped>
.navbar {display: flex;padding: 0 20px;background-color: #333;
}.nav-item {color: white;text-decoration: none;padding: 15px 20px;transition: background-color 0.3s;
}.nav-item:hover {background-color: #555;
}/* 激活状态样式（当前选中的导航项） */
.active {background-color: #007bff;
}
</style>

配置路由

在 src 目录下创建 router 文件夹，新建 index.ts 路由配置文件：
// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// 导入页面组件
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import DocView from '../views/DocView.vue'// 路由规则
const routes: RouteRecordRaw[] = [{path: '/', // 首页路径name: 'Home',component: HomeView},{path: '/about', // 关于页路径name: 'About',component: AboutView},{path: '/doc', // 文档页路径name: 'Doc',component: DocView}
]// 创建路由实例
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL), // 基于 HTML5 History 模式routes // 注入路由规则
})export default router

修改根组件（App.vue）

整合导航栏和路由出口（路由匹配的页面会在这里渲染）：
<!-- src/App.vue -->
<template><div class="app"><!-- 导航栏 --><Navbar /><!-- 路由出口：当前匹配的页面组件会渲染在这里 --><router-view /></div>
</template><script setup lang="ts">
// 导入导航栏组件
import Navbar from './components/Navbar.vue'
</script><style scoped>
.app {min-height: 100vh;display: flex;flex-direction: column;
}
</style>

配置入口文件（main.ts）

确保已正确挂载路由（通常初始化项目时已配置，确认即可）：
// src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index' // 导入路由配置createApp(App).use(router) // 挂载路由.mount('#app')

 

运行效果

清空项目自带的src/style.css文件，执行 npm run dev 启动项目，访问 http://localhost:5173 会看到：
  • 顶部有黑色导航栏，包含「首页」「关于」「文档」三个链接
  • 点击不同链接，下方内容区域会切换对应的页面（无需刷新）
  • 当前选中的导航项会显示蓝色背景（active-class 效果）

image