当前位置: 首页 > news >正文

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

第一部分

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

 

http://www.hskmm.com/?act=detail&tid=35229

相关文章:

  • 10.20 CSP-S模拟35 改题记录
  • 我写过的动态规划问题的状态表示与转移汇总
  • 基于大语言模型的具身智能语义地图与导航研究 - MKT
  • 2025最新发布|中国薪酬SaaS软件市场分析及测评
  • CSP-S模拟36
  • [图形]StructureBuffer
  • 【题解】洛谷 P3395 路障
  • (薛定谔のCSP-S)模拟35 2025.10.20
  • AI建的网站,真的对SEO友好吗?深度剖析其优势与潜在缺陷
  • 追忆
  • 高效增量综合
  • 2025年上海律师推荐排行榜,经侦律师,民事纠纷律师,刑事律师,经济律师,婚姻律师,法务律师,负债律师事务所专业解析
  • 结对项目———四则运算
  • luogu P14259 兄妹(siblings)
  • 2025年通风设备厂家权威推荐榜:通风气楼/通风天窗/排烟天窗/自然通风器,精选圆拱型/一字型/三角型/电动启闭式全系列优质厂家
  • 作业操作步骤
  • 2025年化工原料厂家推荐排行榜:双氧水/片碱/盐酸/磷酸/PAC/聚丙烯酰胺/消泡剂/阻垢剂等工业级化学品优质供应商
  • 2025年棋牌室加盟品牌权威推荐榜:自主棋牌室加盟,自助棋牌室加盟,智能棋牌室加盟,共享棋牌室加盟品牌综合评测与选址运营指南
  • 模拟赛记录
  • 结对项目--小学四则运算题目生成器
  • 2025年焊接变位机厂家权威推荐榜:变位机/双轴变位机专业制造,高精度传动与定制化解决方案实力解析
  • 阿里云智能语音简单使用:语音识别
  • 10月20日
  • 20232426 2025-2026-1 《网络与系统攻防技术》实验二实验报告
  • 10.20
  • 题单
  • 计数
  • 2025年风机盘管厂家权威推荐榜:两联供室内机/水系统空调室内机/全包围风机盘管/超薄风机盘管/静音风机盘管/半包围风机盘管/单冷源除湿新风机/五恒空调
  • Wamp 启动图标橙色(2/3 服务运行):MySQL 服务启动失败解决方案
  • 文章测试