vue 路由跳转四种方式实践案例 (带参数)
更新时间：2025年05月21日 09:53:26 作者：Linux小百科
本文详细介绍了Vue中通过$router对象实现的四种路由跳转方法：router-link的使用、this.$router.push()和this.$router.replace(),以及参数传递的query与params区别,感兴趣的朋友跟随小编一起看看吧
之前给大家介绍过详解vue 路由跳转四种方式 (带参数) ，今天在通过示例代码给大家科普下关于vue 路由跳转的相关知识。
本文介绍了vue 路由跳转四种方式 (带参数)，本文通过实例代码给大家介绍的详细，具有一定的参考借鉴价值,需要的朋友可以参考下
1. router-link
1. 不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。2.带参数
<router-link :to="{name:'home', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id2. this.$router.push() (函数里面调用)
1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。
3. this.$router.replace()
(用法同上,push)
4. this.$router.go(n) ()
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数。
到此这篇关于详解vue 路由跳转四种方式 (带参数)的文章就介绍到这了,更多相关vue 路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
提起帮助文档，想必大家都会想到 VuePress等。但是VuePress是“静态网站生成器”，需要我们自行编写文档，然后交给VuePress变成网站。因此，本文将用vite2+Vue3编写一个在线帮助文档工具，需要的可以参考一下2022-03-03
在Vue3中,导航守卫（Navigation Guards）用于在路由切换前后执行一些操作,例如验证用户权限、取消路由导航等,本文主要为大家介绍了vue3中导航守卫的使用方法,需要的可以参考下2023-08-08
这篇文章主要介绍了vue中使用vue-print.js实现多页打印，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
在日常开发过程中,为了减少最后打包出来的体积,我们会用到cdn引入一些比较大的库来解决,下面这篇文章主要给大家介绍了关于vue项目使用CDN引入的配置与易出错点的相关资料,需要的朋友可以参考下2022-05-05
Vue3 elementUI如何修改el-date-picker默认时间
这篇文章主要介绍了Vue3 elementUI如何修改el-date-picker默认时间，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
从Vue2升级Vue3过程中遇到作用域插槽语法变更问题的解决方法
在将项目从 Vue 2 升级到 Vue 3 的过程中,遇到了两处典型的兼容性问题,主要涉及 作用域插槽语法变更 和 响应式数据类型处理差异,本文通过具体代码示例,说明问题原因、Vue 版本机制差异,并给出推荐改法,需要的朋友可以参考下2026-02-02
这篇文章主要介绍了Vue-resource三种请求格式和万能测试地址,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
Nuxt.js是一个基于Vue.js的框架,结合Serverless架构,Nuxt.js可以让你构建高度可扩展、成本效益高的无服务器应用,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
vue使用this.$message不生效的部分原因及解决方案
这篇文章主要介绍了vue使用this.$message不生效的部分原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
TinyMCE 是一款功能强大的富文本编辑器,广泛应用于各种 Web 应用中,本文将详细介绍如何在 Vue 项目中集成 TinyMCE,通过详尽的步骤说明、示例代码展示以及丰富的配置选项,助力开发者轻松实现内容编辑的增强与美化,需要的朋友可以参考下2024-11-11
最新评论