vue this.$router.push跳转传参教程

柔情只为你懂 2022-12-24 00:40 129阅读 0赞

### vue this.$router.push跳转传参教程 ###

*  缘起
 *  基本用法

# 缘起 #

`项目多且杂，跳转肆年华。风卷花落去，不知入谁家`。今天就说说跳转携带参数无效问题。

# 基本用法 #

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>实例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>通过路径字符串跳转</td> 
   <td><code>this.$router.push('/home')</code></td> 
  </tr> 
  <tr> 
   <td>通过路径参数跳转</td> 
   <td><code>this.$router.push('/home')</code></td> 
  </tr> 
  <tr> 
   <td>通过路由name跳转</td> 
   <td><code>this.$router.push({ name: 'home', params: { userId: 38}})</code></td> 
  </tr> 
  <tr> 
   <td>通过地址传递参数</td> 
   <td><code>this.$router.push({ name: 'home', query: { userId: 33 }})</code></td> 
  </tr> 
  <tr> 
   <td>通过query及param传递</td> 
   <td><code>this.$router.push({ name:'home', params:article,query:{userId:'33'}})</code></td> 
  </tr> 
 </tbody> 
</table>

回显代码如下：

console.log(this.$route.query)
        console.log(this.$route.params)

只放最后一种情况下的打印截图：  
![在这里插入图片描述][20201125212425877.png_pic_center]  
能看到如果我们同时设置了query及param两个值，就能通过query或者param获取到参数。

注：在使用过程中，发现`this.$router.push({ path: 'home', params: { userId: 33 }})` 中，把name换成path，则无效。只有在设置name的情况下才能正常的获取到param的值。推论，router获取参数的方式应该是通过name获取的，抛砖引玉，如有理解不当，请指正。

[20201125212425877.png_pic_center]: /images/20221120/7ee27e68c5f641259c261af5a615ed18.png

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关前端vue2.0跳转路由如何传参

下面代码的含义 const queryParamsStr = JSON.stringify(this.queryParams) this.$router.pu

秒速五厘米/ 2024年03月25日 17:06/ 0 赞/ 1 阅读

相关 Vue Router 路由跳转传参实践

Vue Router 路由跳转传参实践文章目录 Vue Router 路由跳转传参实践一、动态路由匹配 1、路由配置 2、

╰+哭是因爲堅強的太久メ/ 2023年09月26日 20:27/ 0 赞/ 101 阅读

相关 vue this.$router.push跳转传参教程

vue this.$router.push跳转传参教程缘起基本用法缘起 `项目多且杂，跳转肆年华。风卷花落去，不知入谁家`。今天就说说跳转携带参

柔情只为你懂/ 2022年12月24日 00:40/ 0 赞/ 130 阅读

相关 vue element-ui 页面跳转传参

第一种方式 1.跳转按钮 router-link <router-link :to="{path:'router中配置的页面路径',query:{参数名:

- 日理万妓/ 2022年11月22日 05:12/ 0 赞/ 519 阅读

相关 VUE点击实现路由跳转传参

在页面开发中，我们经常需要实现点击跳转页面，并传递相应的参数过去在另一个页面展示出来。废话不说，直接上代码。路由发出页面 <template> <div id=

旧城等待，/ 2022年05月14日 08:14/ 0 赞/ 316 阅读

相关 vue跳转传参刷新后参数消失

一开始需要实现的功能是跳转到一个页面然后传入一个产品ID号，然后在目标页面用这个ID号显示具体的产品信息我是用的方法是在template中使用router-link标签

今天药忘吃喽~/ 2022年03月06日 06:30/ 0 赞/ 167 阅读

相关 vue页面跳转传参

使用以下方式传参： `this.$router.push({ path: 'registerowner', name: "registerowner", params:{c

曾经终败给现在/ 2021年09月28日 22:32/ 0 赞/ 457 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 611 阅读

相关 vue 命名路由跳转、传参

命名路由 (1)通过路由设置的name来导航 (2)编程式导航中,也可以使用命名路由的方式如:this.$router.pu

今天药忘吃喽~/ 2021年07月24日 17:59/ 0 赞/ 578 阅读

相关 mpvue 页面跳转传参

1、跳转传参回调中 wx.navigateTo({ url:'根据当前文件的相对路径/?键值对' })

谁践踏了优雅/ 2021年07月24日 16:26/ 0 赞/ 486 阅读