vue路由跳转和传参的几种方式

最新推荐文章于 2025-06-11 02:06:48 发布

一个认真学前端的人

最新推荐文章于 2025-06-11 02:06:48 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue中路由传参文章标签： vue.js javascript html

本文链接：https://blog.youkuaiyun.com/lin_lin_zhao/article/details/120508452

vue中路由传参专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue Router中如何通过`router-link`和`this.$router.push()`进行页面跳转，并传递参数。无论是不带参数还是带参数，无论是使用`params`还是`query`，都有清晰的示例代码展示。同时，指出了`params`和`query`传参的区别，`params`仅适用于通过`name`引入的路由，而`query`则在`name`和`path`引入时都适用。在接收参数方面，可以在HTML模板或JS中获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.通过router-link的方法：
不带参数的情况：

<router-link :to="{name:'index'}">点击跳转到index页面</router-link>

或者

<router-link :to="{path:'/index'}">点击跳转到index页面</router-link>

带参数的情况：

<router-link :to="{name:'index',params: {id:1}}">点击跳转到index页面</router-link>
<router-link :to="{name:'index',query: {id:1}}">点击跳转到index页面</router-link>

或者

<router-link :to="{path:'/index',query: {id:1,name:'liming'}}">点击跳转到index页面</router-link>

在index页面中接受参数的方法：
html中
<div>{{$route.query.id}}</div>
<div>{{$route.params.id}}</div>
js中
this.$route.query.id
this.$route.params.id

2 this.$router.push() (函数里面调用)
不带参数的情况：

this.$router.push({name:'home'})
this.$router.push({path:'/home'})

带参数的情况：

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({name:'home',params: {id:'1'}})

或者

this.$router.push({path:'/home',query: {id:'1'}})

query和params传参的区别可以参考一下文章：
vue路由跳转携带参数时query和params的区别
注意：带参数传参的时候，当用params进行传参的时候只能由name引进路由；当使用query进行传参的时候，以path，name引入路由都是可以的。

在index页面中接受参数的方法同上。