vue-router常用传参方式

我就是我 2023-01-05 12:14 107阅读 0赞

# No.1 #

<router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link>

this.$route.query.userId  // 123
    this.$route.query.userName  // xia

> http://localhost:8080/test?userId=123&userName=xia

# No.2 #

<router-link :to="{name:'test',params: { userId: 123,userName:'xia' }}">跳转</router-link>
    
    
    <router-link :to="{path:'/test',params: { userId: 123,userName:'xia' }}">跳转</router-link>

this.$route.params.userId  // 123
    this.$route.params.userName  // xia

> http://localhost:8080/test

# No.3 #

// router.js
    { 
        path: '/test/:userId/:userName?', //?问号的意思是该参数不是必传项
        name: 'test',
        component: 'test.vue',
        props: true,
    }

this.$route.params.userId  // 123
    this.$route.params.userName  // xia

> http://localhost:8080/test/123/xia

# $router & $route #

this.$router.go(-1);  // 向前或者向后跳转n个页面，n可为正整数或负整数
    this.$router.push('/'); // 跳转到指定url路径，history栈中会有记录，点击返回会跳转到上个页面
    this.$router.replace('/'); // 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

// 获取路由传递过来的参数
    this.$route.params.userId  
    this.$route.query.userName

发表评论取消回复

表情：

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

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

相关阅读

相关 Mybatis用xml配置sql传参方式

1、传入一个参数方法： int deleteByPrimaryKey(Integer id); 配置 <delete id="deleteBy...

绝地灬酷狼/ 2024年04月17日 14:34/ 0 赞/ 56 阅读

相关 Swagger指定传参方式

@ApilmplicitParam配置一个参数 paramType="query" 加在后面就行了。这个属性是指定参数放的位置的。 paramType：参数放在哪个地方

我会带着你远行/ 2024年03月29日 16:07/ 0 赞/ 70 阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 93 阅读

相关 axios常见传参方式

[https://www.cnblogs.com/zhaojunhao/p/9622004.html][https_www.cnblogs.com_zhaojunhao_p_

冷不防/ 2023年06月30日 09:07/ 0 赞/ 1 阅读

相关 vue-router常用传参方式

No.1 <router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</

我就是我/ 2023年01月05日 12:14/ 0 赞/ 108 阅读

相关 C/C++编程：函数参数传递方式 --- 值传参、地址传参、引用传参

三种参数传递方式 C++有函数参数有三种方式：值传递、地址传递、引用传递。默认情况下，参数通过值传递给函数，这意味着函数会收到所传递对象的副本。对于大型

旧城等待，/ 2022年12月25日 04:51/ 0 赞/ 271 阅读

相关 mybatis传参方式

mybatis一直都在使用注解方式，今天有个业务逻辑使用5个参数经行模糊查询，决定在XML中使用动态sql。 ![SouthEast][] 但是在测试的过程中控制台报

小鱼儿/ 2022年09月29日 04:27/ 0 赞/ 265 阅读

相关 angularjs页面传参方式

1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面（producers.ht

ゝ一世哀愁。/ 2022年09月26日 02:44/ 0 赞/ 250 阅读

相关 URLConnection POST方式传参总结

HTTP Post方法用于向服务器提交数据，写法比Get方法稍微复杂那么一点，这里总结一下Post方式传参的几种方法 1、一个或者多个参数，以form形式提交，提交形式如“

灰太狼/ 2022年03月10日 03:48/ 0 赞/ 676 阅读

相关 C++引用方式传参，传值方式传参（*、&）

C++引用方式传参，传值方式传参（\、&）和数组作为参数传递 1、引用方式传参 2、传值方式传参

「爱情、让人受尽委屈。」/ 2022年02月22日 15:04/ 0 赞/ 450 阅读