精华内容
下载资源
问答
  • vue-router传递参数的几种方式

    万次阅读 多人点赞 2018-07-06 16:24:29
    vue-router传递参数分为两大类编程式的导航 router.push声明式的导航 <router-link>编程式的导航 router.push编程式导航传递参数有两种类型:字符串、对象。字符串字符串的方式是直接将路由地址以字符...

    vue-router传递参数分为两大类

    • 编程式的导航 router.push
    • 声明式的导航 <router-link>

    编程式的导航 router.push

    编程式导航传递参数有两种类型:字符串、对象。

    字符串

    字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数:
    this.$router.push("home");
    

    对象

    想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由、查询参数,下面分别说明两种方式的用法和注意事项。

    命名路由

    命名路由的前提就是在注册路由的地方需要给路由命名如:

    命名路由传递参数需要使用params来传递,这里一定要注意使用params不是query。目标页面接收传递参数时使用params

     特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的

    使用方法如下:

    this.$router.push({ name: 'news', params: { userId: 123 }})

    代码如下:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <button @click="routerTo">click here to news page</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        routerTo(){
          this.$router.push({ name: 'news', params: { userId: 123 }});
        }
      }
    }
    </script>
    
    <style>
    </style>

    接受传递的参数:

    <template>
      <div>
        this is the news page.the transform param is {{this.$route.params.userId}}
      </div>
    </template>
    <script>
      
    </script>

    运行效果如下:


    查询参数

    查询参数其实就是在路由地址后面带上参数和传统的url参数一致的,传递参数使用query而且必须配合path来传递参数而不能用name,目标页面接收传递的参数使用query。
    注意:和name配对的是params,和path配对的是query
    使用方法如下:
    this.$router.push({ path: '/news', query: { userId: 123 }});

    代码如下:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <button @click="routerTo">click here to news page</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        routerTo(){
          this.$router.push({ path: '/news', query: { userId: 123 }});
        }
      }
    }
    </script>
    
    <style>
    </style>

    接收参数如下:

    <template>
      <div>
        this is the news page.the transform param is {{this.$route.query.userId}}
      </div>
    </template>
    <script>
    </script>
    运行效果如下:


    声明式的导航

    声明式的导航和编程式的一样,这里就不在过多介绍,给几个例子大家对照编程式理解,例子如下:

    字符串

    <router-link to="news">click to news page</router-link>

    命名路由

    <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
    运行效果如下:

    查询参数

    <router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>
    运行效果如下:

    最后总结:路由传递参数和传统传递参数是一样的,命名路由类似表单提交而查询就是url传递,在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了,最后总结为以下两点:
    1.命名路由搭配params,刷新页面参数会丢失
    2.查询参数搭配query,刷新页面数据不会丢失
    3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

    如果觉得有帮助请支持我吧!







    展开全文
  • 最近使用Spring 的 RestTemplate 工具类请求接口的时候发现参数传递的一个坑,也就是当我们把参数封装在Map里面的时候,Map 的类型选择。 使用RestTemplate post请求的时候主要可以通过三种方式实现 1、调用...

        最近使用Spring 的 RestTemplate 工具类请求接口的时候发现参数传递的一个坑,也就是当我们把参数封装在Map里面的时候,Map 的类型选择。 使用RestTemplate post请求的时候主要可以通过三种方式实现

        1、调用postForObject方法  2、使用postForEntity方法 3、调用exchange方法

        postForObjectpostForEntity方法的区别主要在于可以在postForEntity方法中设置header的属性,当需要指定header的属性值的时候,使用postForEntity方法exchange方法和postForEntity类似,但是更灵活,exchange还可以调用get、put、delete请求。使用这三种方法调用post请求传递参数,当接口是表单接收参数的时候,Map不能定义为以下两种类型(url使用占位符进行参数传递时除外),HashMap是以请求体传递,MultiValueMap是表单传递!

    Map<String, Object> paramMap = new HashMap<String, Object>();
    Map<String, Object> paramMap = new LinkedHashMap<String, Object>();

       经过测试,我发现这两种map里面的参数都不能被后台接收到,这个问题困扰我两天,终于,当我把Map类型换成LinkedMultiValueMap后,参数成功传递到后台

    MultiValueMap<String, Object> paramMap = new LinkedMultiValueMap<String, Object>();

        经过测试,正确的传参方式如下

    public static void main(String[] args) {
            RestTemplate template = new RestTemplate();
            String url = "http://192.168.2.40:8081/channel/channelHourData/getHourNewUserData";
            // 封装参数,千万不要替换为Map与HashMap,否则参数无法传递
            MultiValueMap<String, Object> paramMap = new LinkedMultiValueMap<String, Object>();
            paramMap.add("dt", "20180416");
    
            // 1、使用postForObject请求接口
            String result = template.postForObject(url, paramMap, String.class);
            System.out.println("result1==================" + result);
    
            // 2、使用postForEntity请求接口
            HttpHeaders headers = new HttpHeaders();
            HttpEntity<MultiValueMap<String, Object>> httpEntity = new HttpEntity<MultiValueMap<String, Object>>(paramMap,headers);
            ResponseEntity<String> response2 = template.postForEntity(url, httpEntity, String.class);
            System.out.println("result2====================" + response2.getBody());
    
            // 3、使用exchange请求接口
            ResponseEntity<String> response3 = template.exchange(url, HttpMethod.POST, httpEntity, String.class);
            System.out.println("result3====================" + response3.getBody());
    
    }
    

    GET方式传参说明

    如果是get请求,又想要把参数封装到map里面进行传递的话,Map需要使用HashMap,且url需要使用占位符,如下:

    public static void main(String[] args) {
            RestTemplate restTemplate2 = new RestTemplate();
            String url = "http://127.0.0.1:8081/interact/getData?dt={dt}&ht={ht}";
           
            // 封装参数,这里是HashMap
    	Map<String, Object> paramMap = new HashMap<String, Object>();
    	paramMap.put("dt", "20181116");
    	paramMap.put("ht", "10");
    
    	//1、使用getForObject请求接口
    	String result1 = template.getForObject(url, String.class, paramMap);
    	System.out.println("result1====================" + result1);
    
    	//2、使用exchange请求接口
    	HttpHeaders headers = new HttpHeaders();
    	headers.set("id", "lidy");
    	HttpEntity<MultiValueMap<String, Object>> httpEntity = new HttpEntity<MultiValueMap<String, Object>>(null,headers);
    	ResponseEntity<String> response2 = template.exchange(url, HttpMethod.GET, httpEntity, String.class,paramMap);
    	System.out.println("result2====================" + response2.getBody());
    }

    ps:post请求也可以通过占位符的方式进行传参(类似get),但是看起来不优雅,推荐使用文中的方式

    补充:使用RestTemplate调用delete、put请求请参考我的另一篇文章:https://blog.csdn.net/LDY1016/article/details/100121146

     

    展开全文
  • 如何使用router-link对象方式传递参数

    万次阅读 多人点赞 2018-05-11 01:05:43
    如何使用router-link对象方式传递参数? 疑问:(判断和传参) 点击导航栏目,js如何判断自己点击的是哪个具体栏目? 它们是如何传参的? 效果图解说: A. 点击选择【屈原“查看详情”】之前 ...

    如何使用router-link对象方式传递参数?

    疑问:(判断和传参)

    1. 点击导航栏目,js如何判断自己点击的是哪个具体栏目?
    2. 它们是如何传参的?
      如何使用params,携带查询参数?

    效果图解说:

    A. 点击选择【屈原“查看详情”】之前

    未点击选择之前

    B. 点击选择【屈原“查看详情”】之后

    点击选择之后


    要点总结:

    vue-router中,有两大对象被挂载到了实例this
    $route(只读、具备信息的对象)
    $router(具备功能的函数)

    查询字符串:
    1. 去哪里 ?
      <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>
    2. 导航(查询字符串path不用改)
      {name:'detail',path:'/detail',组件}
    3. 去了干嘛?获取路由参数(要注意是 query ,还是 params 和 对应的 id名? 是后者需要注意设置相关文件的id规则)
      + this.$route.query.id
    path方式:
    1. 去哪里 ?
      <router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>
    2. 导航(查询字符串path不用改)
      {name:'detail',path:'/detail/:name',组件}
    3. 去了干嘛?获取路由参数(要注意是 query ,还是 params 和 对应的 name名? 是后者需要注意设置相关文件的id规则)
      + this.$route.params.id

    相关文件代码:


    1. main.js文件

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    //引入主体(页面初始化显示)
    import App from './components/app.vue';
    //一个个link对象 - 分类
    import Detail from './components/detail.vue';
    import List from './components/list.vue';
    
    //安装插件
    Vue.use(VueRouter);//挂载属性
    
    //创建路由对象并配置路由规则
    let router = new VueRouter({
    	//routes
    	routes: [
    	//一个个link对象
        {name: 'detail',path: '/detail',component: Detail},
        //此处的path规则不受list.vue中的query(匹配参数规则的)影响
        {name: 'list',path: '/list',component: List}
      ]
    });
    
    /* new Vue 启动 */
    new Vue({
      el: '#app',
      render: c => c(App),
      //让vue知道我们的路由规则
      router:router,//可以简写为router
    })
    
    

    2. app.vue文件

    <template>
      <div>
      	<div class="header">
      		头部 - 导航栏目
      		
      		<p>
    	  		<router-link :to="{name:'detail'}">细节列表1</router-link>
    	  		<router-link :to="{name:'list'}">英雄列表1</router-link>
      		</p>
      	</div>
      	
      	<!--留坑,非常重要-->
    		<router-view class="main"></router-view>
    		
    		<div class="footer">底部 - 版权信息</div>
    		
      </div>
    </template>
    
    <script>
    	export default {
    	  data(){
    	  	return{
    	  		
    	  	}
    	  },
    	  methods:{
    	  	
    	  }
    	}
    </script>
    
    <style scoped>
    	.header,.main,.footer{text-align: center;padding: 10px;}
    	
    	.header{height:70px;background: yellowgreen;}
    	.main{height:300px;background: skyblue;}
    	.footer{height: 100px;background: hotpink;}
    </style>
    
    

    3. list.vue文件

    <template>
    	<div>
    		我是list列表
    		<!-- :key是绑定器 -->
    		<!-- query是查询字符串,加查询参数 ,相当于查询规则;对比参考main.js关于路由配置path属性-->
    		<ul>
    			<li v-for="(hero,index) in heros" :key="index">
    				{{hero.name}}
    				<router-link :to="{name:'detail',query:{id:index}}">查看详情</router-link>
    			</li>
    		</ul>
    	</div>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				heros:[{
    					name:'李白'
    				},{
    					name:'杜甫'
    				},{
    					name:'屈原'
    				},{
    					name:'白居易'
    				},{
    					name:'李清照'
    				},{
    					name:'欧阳修'
    				}]
    			}
    		}
    	}
    </script>
    
    <style scoped>	
    	ul,li{list-style: none;}
    </style>
    

    4. detail.vue文件:(可以在控制台查看打印结果)

    <template>
    	<div>
    		我是详情
    	</div>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				
    			}
    		},//DOM尚未生成
    		create(){
    			//获取路由参数
    			//vue-router中挂载两个对象的属性
    			//$route(信息数据)
    			//$router(功能函数)
    			/*console.log(this.$route.params);*/
    			console.log(this.$route.query);
    			
    		},//已经将数据装载到页面上去了,DOM已经生成
    		mounted(){
    			
    		}
    	}
    </script>
    
    <style>
    </style>
    

    以上就是关于“如何使用router-link对象方式传递参数?”的全部内容。

    展开全文
  • Shell 传递参数

    千次阅读 2016-08-29 22:23:14
    概述$n我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n。n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推……实例以下实例我们向脚本传递三个参数,并...

    在这里插入图片描述

    概述$n

    我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n。

    n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推……

    #实例

    以下实例我们向脚本传递三个参数,并分别输出,其中 $0 为执行的文件名:

    #!/bin/bash
    # author:xiaogongjiang
    # date:2016-08-29
    
    echo "Shell 传递参数实例!";
    echo "执行的文件名:$0";
    echo "第一个参数为:$1";
    echo "第二个参数为:$2";
    echo "第三个参数为:$3";
    

    为脚本设置可执行权限,并执行脚本,输出结果如下所示:

    $ chmod +x test.sh 
    $ ./test.sh 1 2 3
    Shell 传递参数实例!
    执行的文件名:./test.sh
    第一个参数为:1
    第二个参数为:2
    第三个参数为:3
    

    另外,还有几个特殊字符用来处理参数:

    这里写图片描述

    #!/bin/bash
    # author:xiaogongjiang
    # date:2016-08-29
    
    echo "Shell 传递参数实例!";
    echo "第一个参数为:$1";
    
    echo "参数个数为:$#";
    echo "传递的参数作为一个字符串显示:$*";
    

    执行脚本,输出结果如下所示:

    $ chmod +x test.sh 
    $ ./test.sh 1 2 3
    Shell 传递参数实例!
    第一个参数为:1
    参数个数为:3
    传递的参数作为一个字符串显示:1 2 3
    

    $* 与 $@ 区别:

    • 相同点:都是引用所有参数。
    • 不同点:只有在双引号中体现出来。假设在脚本运行时写了三个参数 1、2、3,,则 " * " 等价于 “1 2 3”(传递了一个参数),而
      “@” 等价于 “1” “2” “3”(传递了三个参数)。
    #!/bin/bash
    # author:xiaogongjiang
    # date:2016-08-29
    
    echo "-- \$* 演示 ---"
    for i in "$*"; do
        echo $i
    done
    
    echo "-- \$@ 演示 ---"
    for i in "$@"; do
        echo $i
    done
    

    执行脚本,输出结果如下所示:

    $ chmod +x test.sh 
    $ ./test.sh 1 2 3
    -- $* 演示 ---
    1 2 3
    -- $@ 演示 ---
    1
    2
    3
    
    展开全文
  • uniapp url 传递参数 、接收参数

    千次阅读 2020-07-22 10:50:00
    uniapp url 传递参数 、接收参数 uniapp url 地址 接收参数 uniapp url 传递参数 uniapp 接收 url 参数
  • bat 传递参数

    千次阅读 2019-04-21 17:15:00
    调用bat时,传递参数有个小问题,记录一下。 1.问题描述: 传递参数时,接收的值不对。传递了“1,2,3”,接收时,只剩下1。后面的没有了。 解决: 原因是bat取参时,语法弄错了。 Syntax 1: %0 代表bat...
  • shell 传递参数

    千次阅读 2019-03-01 19:05:48
    定义 Shell 函数时不能带参数,但是在调用函数时却可以传递参数,这些传递进来的参数,在函数内部就也使用$n的形式接收,例如,$1 表示第一个参数,$2 表示第二个参数,依次类推,注意:$0表示当前文件名。...
  • Intent传递参数

    千次阅读 2018-03-01 23:44:53
    1、向下一个活动传递参数通过putExtra()方法的重载,把传递的参数暂存在Intent中,启动另一个活动后,只需将参数从Intent中取出 //传递参数 Intent intent = new Intent(MainActivity.this,FirstActivity.class); ...
  • mybatis 传递参数的7种方法

    万次阅读 多人点赞 2019-07-06 10:23:59
    mybatis 传递参数的7种方法 在实际开发过程中,增删改查操作都要涉及到请求参数的传递,今天这节就集中讲下在mybatis中传递参数的7中方法 单个参数的传递很简单没有什么好将的,这里主要说下多个参数的传递 1.第一种...
  • 1.跳转页面并传递参数 this.props.history.push("/detail", { dotData: record }); 2.在detail页面回去参数  const messages = this.props.location.state.dotData  
  • 一.前言 由于业务需要,在网上找了很久得到了这两种方式。本文代码偏少,主要讲解一下怎么传,如何接收,也记录一下,以便之后...二.Spring拦截器传递参数到controller 三.Aop切面传递参数到目标方法 四.总结 ...
  • 当信号和槽都在同一个线程中时,值传递参数和引用传递参数有区别: 值传递会复制对象;(测试时,打印传递前后的地址不同) 引用传递不会复制对象;(测试时,打印传递前后的地址相同) 不在同一个线程中 当信号...
  • linux 传递参数

    千次阅读 2018-07-10 23:32:09
    传递参数脚本内获取参数的格式为:$n,n是数字。$0 表示执行的文件名$1 表示执行脚本的第一个参数...特殊参数:$# 传递到脚本的参数个数$* 以一个字符串显示所有向脚本传递的参数$? 显示命令执行的退出状态。0表示...
  • laravel route传递参数

    万次阅读 2017-11-20 16:37:52
    laravel route传递参数,laravel传递参数,laravel接收参数
  • 使用GET方式传递参数 使用POST方式传递参数 提交、重置、普通按钮如何传送参数 单行与多行文本输入框如何传送参数 单选按钮与复选框如何传送参数 隐藏表单字段与图像字段如何传送参数 列表框如何传送参数 ...
  • Shell函数传递参数

    千次阅读 2019-09-27 11:48:12
    Shell函数传递参数 文章目录Shell函数传递参数背景错误用法解决办法思考提取变量,不加引号提取变量,加引号结论透过现象看本质 背景 函数之间调用时,如果把$@ (全部参数,可以用shift进行截断) 直接全部传递过去可能会...
  • ssh传递参数

    千次阅读 2016-07-11 17:24:12
    1.使用url地址传递参数(每个参数都要在原来界面中能读取,然后传递的话很可能会有冗余数据) 2.使用dto传递参数(只要传递id然后再去数据库读取一遍) 大多数情况下使用2
  • JS传递参数

    千次阅读 2017-12-10 20:18:43
    JavaScript传递参数是按值传递的。 1、基本类型的传递如同基本类型变量的复制一样。 //创建一个函数,在函数内部更改基本类型参数的值 function add(num) { return num + 10; } var count = 10; add(count);//20 ...
  • 传递参数命令——xargs

    千次阅读 2021-03-04 02:38:59
    传递参数命令——xargs一、xargs命令1、定义2、格式3、常用参数4、实例①、管道符传递参数②、多行输出③、打印出 xargs 执行的命令 一、xargs命令 1、定义 xargs命令是给其他命令传递参数的一个过滤器,也是组合...
  • url中传递参数

    万次阅读 2018-09-14 09:40:13
    1.url传递参数 1.非关键字参数 url地址访问格式:/路径/路径/参数 urls正则的定义:/路径/路径/(参数匹配的正则) 注意:1.如果要获取传递进来的参数,必须给对应的正则加上()才可以提取 2.如果url中有...
  • C语言指针传递参数

    千次阅读 2017-11-29 23:47:48
    2.函数在传递参数是传递的一定是形参。 也就是说,其实这里作为参数传递的指针也是形参,他也是原指针变量的拷贝,在上面那段代码中的函数里的内容并没有修改主函数中的指针变量,而是修改的形参指针,并没什么意义...
  • Bundle传递参数

    千次阅读 2017-04-06 15:53:14
    bundle是在android中十分有用的一种类,我们通常用它来进行参数的传递。...使用bundle传递参数会在intent、message、fragment中用到,下面就总结一下这几种情况下用bundle封装参数以及取出参数的写法。1
  • Powershell 脚本绑定参数传递参数实例

    千次阅读 2019-06-26 14:37:25
    powershell 传递 参数 powershell CmdletBinding powershell 命令行 参数 绑定 传入 传递 parameter CmdletBinding 必须在Param前面加上一行 “ [CmdletBinding()] ”,才能用【给脚本内部变量名传值法】。同时$...
  • 关于feign传递参数

    千次阅读 2018-06-24 17:59:38
    1.如果使用url传参,加注解@PathVariable,不能传递...2.如果使用get请求传递参数,同样不能传递对象,而且如果传递参数的话,需要用到@RequestParam标注名称3.传递对象请使用post方式,并且接收端使用@RequestBody注解...
  • java 传递参数的两种方式

    万次阅读 多人点赞 2015-10-19 15:39:28
     值传递:方法调用时,实际参数把它的值传递给对应的形式参数,方法执行中形式参数值的改变不影响实际参 数的值。  引用传递:也称为传地址。方法调用时,实际参数的引用(地址,而不是参数的值)被传递给方法中相...
  • 数组,传递参数

    千次阅读 2019-04-11 20:33:32
    数组,二维数组,传递参数1.数组1.2 数组的基本要素:1.3 使用数组四步走:1.3.1静态赋值:边声明边赋值1.3.2数组的复制和逆序1.3.3使用System.arraycopy复制数组2. 二维数组2.1初始化:2.1.1动态初始化2.1.2静态初始...
  • Shell - 传递参数到Shell 脚本

    千次阅读 2019-10-26 10:41:41
    文章目录Shell - 传递参数到Shell 脚本1、参数传递规则2、参数引用规则3、执行文件参数4、获得传递的参数个数5、其它特殊组合 Shell - 传递参数到Shell 脚本 1、参数传递规则 以空格分隔开 ./xxx.sh 1 2 3 2、参数...
  • pthread线程传递参数

    千次阅读 2018-03-29 15:03:17
    用pthread传递参数格式一般是这样的:int pthread_create (pthread_t *tid,const pthread_attr_t *attr,void *(*func)(void *),void *arg)其中最后一个参数就是用来传递参数的,可以是一个简单的参数,也可以...
  • 构造函数传递参数

    千次阅读 2016-10-26 22:03:05
    构造函数传递参数

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 174,397
精华内容 69,758
关键字:

传递参数