精华内容
下载资源
问答
  • 最近在学习Vue,本文介绍了vue params、query传参使用,分享给大家,也给自己留个笔记 声明式:”…”> 编程式:router.push(…) 这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传...
  • Vue router 如何传参 params、query 是什么...传参: this.$router.push({ path:’/xxx’ query:{ id:id } }) this.$router.push 传参时, 并不会引起页面刷新。需要重新请求数据,代码如下。 <div>shopName:{{shop.sho
  • query传参和params传参的区别 query传参   使用 this.$router.push({path: ‘/’, query: {参数名: ‘参数值’}) ​ 传递: this.$router.push({ name: 'HelloWorld', path: "/HelloWorld", query: { name: ...

    query传参和params传参的区别

    query传参

      使用 this.$router.push({path: ‘/’, query: {参数名: ‘参数值’})

    ​ 传递:

    this.$router.push({
            name: 'HelloWorld',
            path: "/HelloWorld",
            query: {
              name: this.loginform.name,
            },
          });
    

    ​ 接收:

    cosnt name = this.$route.query.name
    

    params传参

      使用 this.$router.push({path: ‘/’, name: ‘’, params: {参数名: ‘参数值’})

    ​ 传递:

    this.$router.push({
            name: 'HelloWorld2',
            path: "/HelloWorld2",
            params: {
              name: this.loginform.name,
            },
          });
    

    ​ 接收:

    cosnt name = this.$route.params.name
    

    两者的区别

    • query可以通过name属性或者path属性来引入路由,而params只能通过name属性来引入路由;在使用params传递时如果指定了path属性而没有name属性,那么界面能成功跳转但是不能接受到传递过来的参数
    • query传递参数时会地址栏会发生改变,传递参数会携带在路径中,而params则不会
    • 在刷新界面时,query传递的参数不会丢失,而params会丢失

    顺带一提vue-router的routes中name属性的作用

      平常在定义路由时都会有一个name属性,通常不去定义这个属性发现也没有任何问题,但是name属性还是有以下作用的

    通过name属性,为一个页面中不同的router-view渲染不同的组件

    <template>
      <div id="app">
         <router-view></router-view>
         <router-view  name="Hello"></router-view> 
         <router-view  name="text"></router-view>   
      </div>
    </template>
    
    

    可以用name传参 使用$route.name获取当前组件name值

     <template>
      <div id="app">
          // 当前组件的name值
        <p>{{ $route.name }}</p> 
        <router-view></router-view>
      </div>
    </template>
    

    作为传参时的路由,如上所示


    总结:

      需要特别注意两种传递方式的区别,通俗的讲,query类似axios中get,而params则类似post,但是需要记得 params传递参数一定要去指定一下name属性,否则会接受不到传递的参数

    展开全文
  • 同时对于第二个属性,我个人建议采用query来进行路由传参,因为 params 对象传参,只要页面一刷新你传入的参数就没了,query则保存在url地址中,你怎么刷新它都还在。 小总结一下: 使用params传参在浏览器的url...

    在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

    想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

    这里我们主要采用对象跳转形式。

    要跳转页面的path属性值:router.push({ path: 'my-exchange' }),对应router数组对象中的path属性值:

    11bfde185678adb39fa5237d8c430685.png

    要跳转页面的name属性值:router.push({ name: 'my-exchange-index' }),对应router数组对象中的name属性值:

    34cf14ca37d013c7f1c01db35e5f375e.png

    给页面传参则在push函数传入的实参对象中的第二个属性传入 queryparams对象即可,对象中写具体要传的参数(注:如果queryparams对象中的属性传入的有引用类型的,则需要JSON.stringify(引用类型)转化一下)。

    021891aa9fc1c7ec3b4920467cd05484.png

    在对应的页面接收也只需要:this.$route.querythis.$route.params:

    254beee542e94c89cca7209f1e8906cb.png

    官方解释:

    78161af3c14258a4e6021c732b610bd9.png

    其中我个人建议对象的第一个属性用name来控制要跳转的页面,因为如果是path的话,params属性将会被忽略(也就是说传参要采用拼接字符串的方式,超不利于代码越多,看的还不舒服)。

    同时对于第二个属性,我个人建议采用query来进行路由传参,因为 params 对象传参,只要页面一刷新你传入的参数就没了,query则保存在url地址中,你怎么刷新它都还在。

    小总结一下:

    使用params传参在浏览器的url地址栏中是不可见得,query则类似于get传参,是可见的。

    params传参会丢失数据,query不会。

    不过虽然params传参会丢失数据,但是它不会污染 url 路径,会显得 url 路径特别的整洁干净。

    所以偶尔也会使用params传参。

    当然啦,也有很多方法可以处理params传参会丢失数据问题,比如通过Cookies来存储数据即可。

    62722b3b5948bfff5066a610666abaf9.png

    在页面进入就执行的生命周期函数中看一下 this.$route.params 中有没有东西,如果有,则把它存到 Cookies 里面如果页面刷新了,数据没了,则直接从Cookies 里面拿即可。

    展开全文
  • 今天开发的时候用query直接传了一个对象,在跳转之后的页面在对这个对象做解析,这样做其实蛮方便的,可惜的是页面不能刷新,虽然刷新后面页面的url还在,但是页面的object解析出错了。 寻其原因 第一次跳转数据是没...

    今天开发的时候用query直接传了一个对象,在跳转之后的页面在对这个对象做解析,这样做其实蛮方便的,可惜的是页面不能刷新,虽然刷新后面页面的url还在,但是页面的object解析出错了。
    寻其原因
    第一次跳转数据是没问题的,但第二次刷新页面数据会变为[object object]

    解决办法:
    要跳转的传参页:先将数组转换为字符串。

    detailFun(row) {
          //console.log(JSON.stringify(row))
          this.$router.push({
            path: '/account/order/detail',
            query: { orderDetail: JSON.stringify(row) }
          })
        },
    

    接收页面:

     created() {
     this.orderDetail = JSON.parse(this.$route.query.orderDetail)
     }
     ```
     这样转换一下刷新后数据就不会丢失。
    
    展开全文
  • vue编程式导航,在这里我们必须要明白一个知识点,就是params和query传参的用法。   params传参,路径不能使用path,只能使用name,不然取不到传的数据。 this.$router.push({name:'Good',params:{goodsId:id}})...

     

    vue编程式导航,在这里我们必须要明白一个知识点,就是params和query传参的用法。

     

    params传参,路径不能使用path,只能使用name,不然取不到传的数据。

    this.$router.push({name:'Good',params:{goodsId:id}})

    取数据时用params获取

    this.$route.params.goodsId

     

    query传参,用的是path,而不是name,否则也会出错。

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

    取数据使用query

    this.$route.query.goodsId

     

    如果使用了以上两种传参方式,使用时我们可以做一下兼容处理

    this.goodsId= this.$route.query.goodsId ? this.$route.query.goodsId:this.$route.params.goodsId

     

     

     

     

     

    展开全文
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:...
  • 使用params路由传参的时候数据会丢失,所以选择了query,但是刷新页面的时候报错 [object,object] 记录: component: demo1 let data={id:1;name:"张三"} this.$router.push({path:'/demo2',query:{data:data}}) ...
  • 使用route的query传参时可能会遇到被转译的问题 //转译 encodeURIComponent(“https://zhidao.baidu.com”); //https%3A%2F%2Fzhidao.baidu.com //逆转译 decodeURIComponent(“https%3A%2F%2Fzhidao.baidu.com”...
  • vue3关于路由query传参

    2021-08-13 15:55:21
    传参 import { useRouter } from "vue-router"; const router = useRouter(); router.push({ path: "/Detail", query: { id:"123" } }); 接受 import { useRoute } from "vue-router"; const route = useRoute(); ...
  • query传参方式: 传参: this.$router.push({ path:’/xxx’ query:{ id:id } }) 接收参数: this.$route.query.id params传参方式: 传参: this.$router.push({ name:‘xxx’ params:{ id:id } }) 接收参数: this.$...
  • vue 中的动态传参和query传参

    万次阅读 2018-07-17 23:43:27
    Vue router 如何传参 params、query 是什么? params:/router1/:id,这里的 id 叫做 params。例如/router1/123, /router1/789 query:/router1?...query 方式传参和接收参数 传参: this.$router.push({ ...
  • vue query传参刷新后数据变成[Object Object] 原因是传参的时候不能传对象,我们可以先转为json字符串,用的时候再转回去就可以了。 错误写法 this.$router.push({ path: '/index', query: object }) 修复 this....
  • Vue中的query传参

    2021-02-16 13:01:10
    query可以一次传入多个参数 传递参数 <template> <div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <router...
  • 使用query传参后第一次跳转数据是没问题的,但第二次刷新页面数据会变为[object object],以下是解决方法之一。 直接上代码 1、要跳转的传参页:先将数组转换为字符串。 <li v-for="(v,index) in indexcurr1['...
  • } query传参 router路由定义 routes:[path:login,component:login] vue页面 登录 注册 等同于this.$router.push('/login?id=1&name=zs') this.$router.push({path:'/register',query:{id:5,name:'lili'}}) params...
  • Vue中 path + query 传参的坑 一、概述 在我们使用Vue中 path + query 方式传参的时候,这里存在一些坑或者说是现象(参数类型因为刷新而变化),记录一下,供大家学习。 二、使用场景 我们在使用Vue中 path + query...
  • 前端post请求中body和query传参

    千次阅读 2021-04-10 16:31:32
    get请求只能传query参数,query参数都是拼在请求地址上的 post可以传body和query两种形式的参数 /* 登陆请求 */ export function login(data) { return request({ url: '/api/user/login', method: 'post', data...
  • vue-router中 query传参和params传参的使用和区别

    万次阅读 多人点赞 2018-11-20 17:59:41
    1.query传参: 1.query传参 路由: var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register', component: register } // name 或 pat...
  • Vue Router 的params和query传参的使用和区别(详尽)

    万次阅读 多人点赞 2018-08-22 15:38:51
    我看了很多人都说query传参要用path来引入,params传参要用name来引入,只是我测试了一下,query使用name来引入也可以传参,使用path也可以。如果有人知道原因可以告诉我一下,谢谢! //query传参,使用name...
  • Vue params 和 query 传参的 区别

    千次阅读 2018-11-28 11:01:12
    今天我们就来说一下params和query传参的使用和区别,要说这个的话,我们就有必要提一下Vue-router了。 Vue-router它主要分为动态路由(传参匹配的问题),嵌套路由(父子组件之间的通信),编程式路由(this.$router...
  • params传参和query传参

    万次阅读 多人点赞 2018-07-20 09:43:29
    写下前面:当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。  注意:如果路由上面不写参数...
  • https://segmentfault.com/q/1010000038525213/a-1020000038529289 query参数都是string类型,只不过vue-router在导航的时候自动帮你处理了参数。
  • 解决办法: 1.传参 this.$router.push({ name: 'user', query: { user: JSON.stringify('XXX' )} }) 2.取参 JSON.parse(this.$route.query.user);
  • query传参: query的值可以通过查询字符串看到 params传参: 其中的name对应的就是router中的name 这个params怎么获取呢? 可以通过this.$route.params获取,注意不是router,是route:(跳转页面用$router,获取参数...
  • axios中post的body与query传参区别及使用总结 1.踩坑描述: 最近在vue项目开发中遇到了一个axios请求方面的问题,post请求传单个参数的时候,按照post请求方式传参但是接口报错,在swagger上面测试后发现接口是没有...
  • 路由跳转带参数到下一个页面,传参后刷新页面,参数报[object,object]错误,希望解决刷新之后值消失,报错问题 解决方案:传值得时候把值转成JSON字符串 取值: 这样就好了

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,939
精华内容 10,375
关键字:

query传参