一、前言最近在学习 Vue3 路由时我做了一个很基础但很有代表性的小案例在新闻页中展示几条新闻点击某一条新闻后跳转到详情页并把当前新闻的编号和标题一起带过去。这个案例虽然不复杂但里面包含了很多 Vue3 路由的重要知识点比如路由的基本配置router-linkrouter-view重定向redirectquery传参useRouter()useRoute()编程式导航router.push()如果只是“抄代码”很容易写完就忘但如果把这套逻辑真正理解透后面学习params传参、嵌套路由、路由守卫都会轻松很多。这篇博客我就结合自己写的这个小案例把这些知识点系统梳理一遍。二、先看这个案例想实现什么这个案例的目标很明确在新闻页中展示一个新闻列表点击某条新闻跳转到新闻详情页跳转时把这条新闻的id和title一起传过去详情页接收参数并显示出来整个流程可以概括为新闻列表页 → 点击某条新闻 → 跳转详情页 → 接收并显示参数这个过程其实就是前端项目里非常常见的列表页 → 详情页所以这个小案例虽然简单但特别适合初学者学习路由。三、路由配置文件怎么理解先来看路由配置文件router/index.jsimport { createRouter, createWebHistory } from vue-router import Home from ../views/HomeView.vue import News from ../views/NewsView.vue import About from ../views/AboutView.vue import NewsDetail from ../views/NewsDetail.vue const router createRouter({ history: createWebHistory(), routes: [ { path: /, redirect: /home }, { path: /home, component: Home }, { path: /news, component: News }, { path: /about, component: About }, { path: /newsDetail, component: NewsDetail } ] }) export default router1.createRouter是什么import { createRouter, createWebHistory } from vue-router这里导入了两个核心函数。其中createRouter作用是创建路由器对象你可以把它理解成整个项目的“路由总管”。后面所有路径、页面切换、参数传递都是交给这个路由器对象来管理的。2.createWebHistory()是什么history: createWebHistory()它表示使用history 模式。这种模式下浏览器地址会更简洁比如/home /news /about而不是带#的形式。所以这里的意思就是当前项目使用浏览器正常路径模式来管理路由。3.routes数组的作用routes: [ ... ]这个数组是路由配置的核心。它本质上就是一张“映射表”表示哪个路径对应哪个组件。例如{ path: /news, component: News }意思就是当地址栏是/news页面显示NewsView.vue所以 Vue Router 的本质可以概括成一句话路由就是路径和组件的映射关系。4.redirect的作用{ path: /, redirect: /home }这条路由规则表示当访问根路径/自动跳转到/home这叫重定向。为什么这样写因为通常项目刚打开时默认访问的就是/。为了让用户一进来就看到首页内容我们一般会把/重定向到/home。5. 新闻详情页为什么也要单独配置{ path: /newsDetail, component: NewsDetail }很多初学者会疑惑“我不是只是传个参数吗为什么还要单独写一个详情页路由”因为参数只是“附带的数据”真正决定页面切换的还是path。也就是说/news显示新闻列表页/newsDetail显示新闻详情页至于显示哪一条新闻详情是通过参数来控制的。四、为什么main.js一定要注册路由来看main.jsimport { createApp } from vue import App from ./App.vue import router from ./router createApp(App).use(router).mount(#app)1..use(router)是什么这一句特别关键.use(router)它的作用是把路由功能安装到 Vue 应用中。如果不写这一句会发生什么router-link不能识别router-view不能识别useRouter()不能用useRoute()不能用所以这一步一定不能少。你可以把它理解成先把路由插件注册进项目整个项目才能拥有路由功能。五、App.vue中最重要的两个标签下面看App.vuetemplate div h1Vue3 路由小案例/h1 router-link to/home首页/router-link | router-link to/news新闻/router-link | router-link to/about关于/router-link hr / router-view / /div /template style scoped a { margin-right: 10px; text-decoration: none; color: black; } .router-link-active { color: red; font-weight: bold; } /style1.router-link的作用router-link to/news新闻/router-link它的作用是点击后跳转到指定路由。你可以把它理解成 Vue Router 版本的超链接。它和普通的a标签很像但更适合单页面应用。例如点击“首页”跳到/home点击“新闻”跳到/news点击“关于”跳到/about2.router-view的作用router-view /这个标签一定要理解透。它是路由出口作用是显示当前路径匹配到的组件。比如当前地址是/home那么这里显示HomeView.vue当前地址是/news那么这里显示NewsView.vue所以你可以这样记router-link 负责跳转 router-view 负责显示3. 为什么链接会高亮样式中写了.router-link-active { color: red; font-weight: bold; }当某个router-link对应的路径正好是当前激活路径时Vue Router 会自动给它加上类名.router-link-active所以当前选中的链接就会变红并加粗。这就是“当前路由高亮”的实现原理。六、新闻页NewsView.vue的核心逻辑来看新闻页代码template div h2新闻页/h2 ul li v-foritem in newsList :keyitem.id span{{ item.title }}/span router-link :to{ path: /newsDetail, query: { id: item.id, title: item.title } } 查看详情 /router-link button clickgoDetail(item)按钮跳转/button /li /ul /div /template script setup import { ref } from vue import { useRouter } from vue-router const router useRouter() const newsList ref([ { id: 1, title: Vue3 路由基础 }, { id: 2, title: Vue3 query 传参 }, { id: 3, title: Vue3 编程式导航 } ]) function goDetail(item) { router.push({ path: /newsDetail, query: { id: item.id, title: item.title } }) } /script1.newsList是什么const newsList ref([ { id: 1, title: Vue3 路由基础 }, { id: 2, title: Vue3 query 传参 }, { id: 3, title: Vue3 编程式导航 } ])这里定义了一个响应式数组用来模拟新闻数据。每一项都包含两个字段id新闻编号title新闻标题这就相当于一个简单的新闻列表数据源。2.v-for在这里干了什么li v-foritem in newsList :keyitem.idv-for的作用是把数组中的每一项都循环渲染出来。所以这里会生成三条新闻。其中item表示当前这一项item.id表示当前新闻编号item.title表示当前新闻标题而:keyitem.id是为了给每一项一个唯一标识方便 Vue 高效更新页面。3.router-link为什么这次写成对象以前基础写法通常是router-link to/news新闻/router-link但这里写成了router-link :to{ path: /newsDetail, query: { id: item.id, title: item.title } } 查看详情 /router-link这是因为这次不仅要跳转页面还要顺便传参数。所以to不再只是一个字符串而是一个对象对象里包含两部分path表示目标页面路径path: /newsDetailquery表示要附带的参数query: { id: item.id, title: item.title }4. 什么是query传参如果点击第一条新闻地址可能变成这样/newsDetail?id1titleVue3%20路由基础问号后面的内容就是query 参数。它的特点是参数会直接显示在地址栏结构清晰适合传一些简单信息通过route.query接收所以你可以简单记query 就是地址栏问号后面的参数。5. 什么是编程式导航代码中还有一个按钮button clickgoDetail(item)按钮跳转/button点击按钮后会执行function goDetail(item) { router.push({ path: /newsDetail, query: { id: item.id, title: item.title } }) }这里的router.push()就是编程式导航。也就是说router-link是写在模板里的点击跳转router.push()是在 JavaScript 代码里主动跳转它适合这些场景点按钮跳转登录成功后跳转表单提交后跳转根据业务逻辑自动跳转6.useRouter()是干什么的import { useRouter } from vue-router const router useRouter()useRouter()的作用是获取路由器对象拿到这个对象之后你才能写router.push(...)所以一句话总结useRouter 是用来跳转页面的。七、详情页NewsDetail.vue是怎么接收参数的来看详情页template div h2新闻详情页/h2 p新闻编号{{ route.query.id }}/p p新闻标题{{ route.query.title }}/p /div /template script setup import { useRoute } from vue-router const route useRoute() /script1.useRoute()是什么import { useRoute } from vue-router const route useRoute()它的作用是获取当前路由信息对象这个对象里面包含很多内容比如当前路径路由参数queryparams因为前面我们传的是query参数所以这里要通过route.query来接收。2. 为什么能直接写route.query.id因为你前面传参时写的是query: { id: item.id, title: item.title }所以在详情页中就可以通过route.query.id route.query.title来获取这些值。3.useRouter()和useRoute()的区别这是初学者最容易搞混的点。useRouter()获取路由器对象用来跳转页面const router useRouter() router.push(/news)useRoute()获取当前路由对象用来读取参数const route useRoute() console.log(route.query.id)一句话记忆useRouter跳useRoute取八、这套案例到底串起了哪些知识点这个案例虽然小但其实已经把 Vue3 路由里很关键的一条主线串起来了。1. 路由的基本配置通过router/index.js配置不同路径对应不同组件。2. 路由重定向通过{ path: /, redirect: /home }实现默认进入首页。3. 页面跳转通过router-link实现声明式导航。4. 路由出口通过router-view /显示当前匹配到的页面组件。5. 列表页到详情页通过在新闻页点击某条新闻跳转到详情页。6.query传参通过对象写法把id和title带到详情页。7. 编程式导航通过router.push()在 JS 代码中主动跳转。8. 参数接收通过useRoute()在详情页中获取当前路由参数。九、最容易混淆的几个点1.router-link和router.push()的区别router-link写在模板里用户点一下才跳转。router.push()写在 JS 里函数执行就跳转。2.useRouter()和useRoute()的区别这个一定要反复记。useRouter()跳转页面useRoute()获取当前路由信息3.path和query的区别在这段代码里router.push({ path: /newsDetail, query: { id: item.id, title: item.title } })path表示跳到哪个页面query表示把哪些数据一起带过去所以路径决定“去哪”参数决定“带什么”。十、我对这个案例的理解这个案例给我最大的收获不是“会写几个 API”而是让我理解了 Vue3 路由的整体流程先配置路径和组件的对应关系再在页面中写导航链接和路由出口在列表页中生成动态数据点击某一项时带参数跳转详情页通过当前路由对象接收参数也就是说这已经不是单纯的“页面切换”了而是开始进入真正项目中常见的业务场景列表页 → 详情页 → 参数驱动内容变化这一点对后面继续学习params传参、嵌套路由、路由守卫都非常有帮助。十一、总结通过这个新闻列表跳详情页的小案例我系统理解了 Vue3 路由中的几个关键点路由本质上是路径和组件的映射关系router-link用于声明式导航router-view用于显示匹配到的组件query参数适合在地址栏中传递简单数据useRouter()负责跳转useRoute()负责取参数router.push()属于编程式导航对于初学者来说这种“小而完整”的案例特别适合练习因为它既不复杂又能把多个知识点串到一起。如果后面继续扩展还可以在这个案例基础上继续加入params传参嵌套路由404 页面路由守卫keep-alive 与路由组件缓存这样就能一步步搭建起完整的 Vue3 路由知识体系。