精华内容
下载资源
问答
  • vue中params与query区别

    2020-05-28 13:51:18
    queryparams区别query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏显示。 很多人都说query传参要用path来引入,params传参要用name来引入,...

    关于vue-router 中参数传递的那些坑(params,query)

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

    1. 编程式的导航 router.push
    2. 声明式的导航

    **query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示,但是刷新页面之后参数会消失,可以使用localStorage进行存储。**代码如下:

    if(this.$route.params.userId){
        this.value = this.$route.params.userId;
        localStorage.setItem('content',this.$route.params.userId)
    }else{
        this.value = localStorage.getItem('content')
        console.log(this.value)
    }
    

    很多人都说query传参要用path来引入,params传参要用name来引入,确实是这样,不过只针对router-link方法,具体看代码

    <router-link :to="{path:'/about/shopList',query:{userId:123}}">
        吃火锅
    </router-link>
    <router-link :to="{name:'shopList',params:{userId:456}}">
       吃羊蝎子
    </router-link>
    
    他们同样都跳转到shopList页面,通过this.$route.params.userId和this.$route.query.userId都获取到了参数
    如果将代码换成如下:
    
    <router-link :to="{path:'/about/shopList',params:{userId:123}}">
        吃火锅
    </router-link>
    <router-link :to="{name:'shopList',query:{userId:456}}">
        吃羊蝎子
    </router-link>
    同样跳到shopList页面,却拿不到参数userId。。。
    

    router.push并不是如此,直接上代码

    1.this.$router.push({
        name: 'shopList',
        params:{
            userId: 666
        }
    })
    2.this.$router.push({
        name: 'shopList',
        query:{
            userId: 666
        }
    })
    不仅name和params传递的参数有效,而且name和query传递的参数也是有效的。
    
    3.this.$router.push({
        path:'/about/shopList',
        query:{
            userId: 666
        }
    })path和query传递参数,在shopList页面可以===接收到参数===
    4.this.$router.push({
        path:'/about/shopList',
        params:{
            userId: 666
        }
    })path和params传递参数,在shopList页面====接收不到参数====
    
    

    以上代码亲测有效,大佬们不喜勿喷。

    展开全文
  • query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.route.query.name和this.route.query.name和this.route.query.name和this.route.params.name。 注意接收参数的时候,已经是route而不是...

    query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this. r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this. route.query.namethis.route.params.name。

    注意接收参数的时候,已经是 r o u t e 而 不 是 route而不是 routerouter了哦!!

    展开全文
  • vue 中paramsquery区别

    千次阅读 2018-10-04 10:12:08
    paramsquery都是为了传递参数 params: 只能用name引入路由传参 第一次使用时犯的错误 将name写成path 导致相应页面获取不到数据(以下是错误写法); 而query则是用path引入路由传参 1.使用params传参参数...

    params和query都是为了传递参数

    params: 只能用name引入路由传参

    第一次使用时犯的错误

    将name写成path 导致相应页面获取不到数据(以下是错误写法);

    而query则是用path引入路由传参

    1.使用params传参参数不会出现在url上, query会出现url上;

    2.刷新页面时 params 参数会消失, 而query不会;

    获取路由的方式: params = this.$route.params;或 query = this.$route.query;

     

    展开全文
  • vue中使用query要搭配path路径,而params只能由命名路由name来引入;看下列代码: 路由path的配置 { path: '/argu/:name/:id', //这种路由配置是params传递参数,且这个后面必须加参数,如果不加,刷新页面...
    1. query传递参数会在url后面用?连接起来,且参数之间用&&符号连接然后显示在页面的url中;params传递参数不会显示在页面中;query有点像ajax中的get请求,而params像post请求。

    2. 在vue中使用query要搭配path路径,而params只能由命名路由name来引入;看下列代码:

      路由中path的配置

      	{
      			path: '/argu/:name/:id', //这种路由配置是params传递参数,且这个后面必须加参数,如果不加,刷新页面这些参数会消失
      			name:'argu',
      			component: () => import('@/views/argu.vue'),
      		},
      

      使用params传递参数注意要在path路径后面添加参数,不然刷新页面数据会丢失。

      看图:这是没有刷新之前;
      在这里插入图片描述

      如果path:'/argu'没有后面的参数,刷新页面数据就会丢失

      这是刷新之后:可以看到数据消失了,变为了默认数据。
      在这里插入图片描述
      使用params传参的具体写法:

      this.$router.push({
          				//params要name一起用,不然接收不到参数
      					name: `argu`,
      					params:{
      						name:'xrw',
                              id:'123'
      					}	
              });
      

      使用query传递参数,在路由中设置path: ‘/argu’,后面可以不跟参数。

      this.$router.push({ 
          path:'/argu', 
          //如果在路由中配置了name属性在这里也是可以用的 name:'argu' 效果同上
          query:{ 
              name:'xrw'
              id : '123'
          }
      })	
      

    在这里插入图片描述
    可以看到使用query传递的参数会显示在url中用?连接起来,可以在浏览器中看到保密性不怎么好。

    1. 两者接收参数的形式

      query:

      //query接收参数
      {{ this.$route.query.name }}
      {{ this.$route.query.id }}
      

      params:

      //params接受参数
      {{ this.$route.params.name }}
      {{ this.$route.params.id }} 
      

      组件中也可以用props来进行接受参数,这种方式(推荐方法

      这样需要在路由配置中设置props为true:

      	{
      			path: '/argu', 
      			name:'argu',
      			component: () => import('@/views/argu.vue'),
      			//设置props为ture,代表将path后面的参数作为值,传递到组件中,组件中通过props属性接受这个值
      			props:true,
      		},
      

      然后再组件中设置props来接收这个参数:

      <template>
       <div>
          //props形式传递参数
      	 {{ name }}
      	 {{ id }}
      	//$route形式传递参数
      	 {{ this.$route.params.name }} 
      	 {{ this.$route.params.id }}
      	 {{ this.$route.query.name }}
      	 {{ this.$route.query.id }} 
       </div>
      </template>
      
      <script>
      export default {
      	 props:{
      		 name:{
      			 type:String,
      			 default:'lily' //默认情况
      		 },
      		 id:{
      			 type:Number,
      			 default:'0' //默认情况
      		 }
      	 }
      }
      </script>
      

      这里我们需要来了解一下 $ route和$router的区别:

      //$router : 是路由操作对象,只写对象
      //$route : 路由信息对象,只读对象
      
      //操作 路由跳转
      this.$router.push({
            name:`argu`,
            params:{
                name:'xrw',
                age:'123'
           }
      })
      
      //读取 路由参数接收
      this.name = this.$route.params.name;
      this.age = this.$route.params.age;
      

      总结

      • query和params是两种传参方式
      • 使用params传参只能由name引入路由,如果写成path页面会显示undefined报错。
      • 使用query传参的话可以使用path也可以使用name引入路由,不过建议使用path引入路由。
      • params是路由的一部分一定要加路由后面添加参数,不添加刷新页面数据会丢失;而query是拼接在url后面的参数,路由后面不添加也没关系。
    展开全文
  • Vue路由paramsquery区别: 项目基于iview-admin-master params • 只能使用命名的路由 • 地址栏不可见,请求类似 localhost:4396/user • 在目标页面使用this.$route.params.id来获取 • 例如: let route = { ...
  • 主要介绍了vue-router中paramsquery区别,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • paramsquery传参方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &...
  • 2、在另外一个组件传递值的时候,都是放在$route 不同点: 1、传值时候,url的表现不一样 query /orderInfo?xxx=yyy&aaa=bbb params /orderInfo/yyy/bbb 2、设置路由规则的时候不一样 ...
  • 转载 https://blog.csdn.net/mf_717714/article/details/81945218
  • { path: '/W/s/:id/:age', name: 'W', component: W } 形成的页面路径 http://localhost:8080/#/W/s/1234/12 query接受传递的参数取值 this.$route.params.id this.$route.params.age paramsquery区别 虽然...
  • query类似于get传参,即在浏览器地址栏显示参数。 传参:this.$router.push({ path: '/news', query: { userId: 123 }}); 取参:this.$route.query.userId params要用name来引入,接收参数都是this.$rou...
  • query传参通过path或name,url会显示参数以及值类似于 http://localhost:8080/#/A?id=124&age=1 params传参必须通过name,如果路由不配置,url不显示参数,但是刷新会消失, {A path:'/A/:id/:age', name:'A', ...
  • 假设是从列表页带着参数id进入详情页,有两种传参方式:params query 1.params 列表页 list.vue: toDetail(id) { this.$router.push({ name: 'detail', params: { id: id } }) }, 详情页 detail....
  • queryparams 两者都是在 vue 路由传递参数 queryparams 用法: query 用 path 引入,params 只能用 name 来传递,不能使用 path query 方式传递参数和接收参数: // 传参 this.$router.push({ path:...
  • 路由传参 ...query 传参 this.$router.push({path:'/home',query:{id:'111}}) this.$router.push({name:'home',query:{id:'111}}) params 传参 this.$router.push({name:'home',params:{id:'111'}})
  • params>?<query>#<frag> scheme方案名称即协议名称,表示用哪种协议访问服务器,如http、https user用户:某些方案访问资源时需要的用户名,有些服务器要求输入用户名密码才会允许用户访问数据,如...
  • 浅析vue-router中paramsquery区别发布时间:2020-10-25 22:22:39来源:脚本之家阅读:100作者:白树1.引入方式不同query要用path来引入this.$router.push({path: 'test',query: {type: 2,detail: '哈哈'}})...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,813
精华内容 6,725
关键字:

vue中params与query区别

vue 订阅