使用 Vue Router 实现单页面应用的路由功能
原创
使用 Vue Router 实现单页面应用的路由功能
原创
小焱
发布于 2025-08-13 09:00:06
发布于 2025-08-13 09:00:06
代码可运行
运行总次数：0
代码可运行
<template>
<div id="app">
<!-- 导航链接 -->
<nav class="nav">
<router-link to="/" class="nav-link" active-class="active">首页</router-link>
<router-link to="/about" class="nav-link" active-class="active">关于我们</router-link>
<router-link :to="{ name: 'User', params: { id: 1 } }" class="nav-link" active-class="active">用户 1</router-link>
<router-link :to="{ name: 'User', params: { id: 2 } }" class="nav-link" active-class="active">用户 2</router-link>
</nav>
<!-- 路由出口：匹配的组件将在这里渲染 -->
<router-view class="content"></router-view>
</div>
</template>
<script setup>
// 根组件不需要额外逻辑
</script>
<style>
.nav {
padding: 20px;
background-color: #f5f5f5;
display: flex;
gap: 10px;
}
.nav-link {
padding: 8px 16px;
text-decoration: none;
color: #333;
border-radius: 4px;
}
.nav-link.active {
background-color: #42b983;
color: white;
}
.content {
padding: 20px;
}
</style>代码解析
这个示例展示了 Vue Router 的核心功能：
- 路由配置：
- 在
main.js中定义了路由规则，包括静态路由、动态路由和通配符路由 - 使用
createWebHistory()启用 HTML5 history 模式，去掉 URL 中的#
- 在
- 路由导航：
- 声明式导航：使用
<router-link>组件创建导航链接 - 编程式导航：使用
router.push()方法在代码中实现跳转 - 后退导航：使用
router.go(-1)返回上一页
- 声明式导航：使用
- 路由参数：
- 定义动态路由
path: '/user/:id'接收用户 ID - 通过
props: true将路由参数作为 props 传递给组件 - 也可以通过
useRoute()钩子获取路由参数
- 定义动态路由
- 路由出口：
- 使用
<router-view>组件作为匹配路由的渲染出口 - 不同的路由会在同一个
<router-view>中渲染对应的组件
- 使用
- 路由守卫（示例中未展示）： 你可以添加全局前置守卫控制路由访问权限：router.beforeEach((to, from, next) => { // 验证逻辑，例如登录检查 next() // 允许导航 })
要使用这个示例，你需要先安装 Vue Router：
npm install vue-router@4 # Vue 3 需使用 Vue Router 4通过这个示例，你可以了解 Vue Router 的基本用法，并根据实际需求扩展更多功能，如嵌套路由、路由元信息、滚动行为控制等。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
