第一部分
1、初始化项目
npm run dev :运行项目
q+Enter:退出运行
![image]()
![image]()
2、安装路由依赖
npm install vue-router@4 # Vue3 对应 vue-router 4.x 版本
第二部分:
在 src/views
目录下创建三个页面组件:
- 首页(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>
- 关于页(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>
- 文档页(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
整合导航栏和路由出口(路由匹配的页面会在这里渲染):
<!-- 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>
确保已正确挂载路由(通常初始化项目时已配置,确认即可):
// 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]()