vue路由对不同界面进行传参及跳转的总结

 更新时间:2019年04月20日 09:11:13   作者:purple_sunset  
这篇文章主要介绍了vue路由对不同界面进行传参及跳转的总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考)。

首先我们先上代码吧!

<router-link :to="{path:'/editaddress',query:{ id:item.id }}"> 
  <div class="top_left_center">
     <img src="/static/images/details/location.png" alt="" class="location_img">
      <span style="color:#f40;font-size:15px;">点击编辑</span>
  </div>
</router-link> 

这个是我常用的传参及跳转路由的方法,下面剪短说一下这个代码,在router-link中:to后面跟着的就是主角(跳转、传参)的内容了,其实我们在从后台拿到数据遍历后,每一个对应的id都会有,这里用的query:{id:item,id},其实就是把遍历对应的id传到path

对应的那个界面,这个常出现在列表页到详情页页这里(当然不只是这里了,其他地方用的很多很多)。

对于传参的方式还是要说下的多余的:

query和params:

a.像这种:to="{path:'/editaddress',query:{ id:item.id }}是query进行传值;这种:to="{path:'/editaddress',params:{ id:item.id }},两种方式传值没什么差别,

但比如在详情页引入值时this.paramsid = this.$route.params.id ---->params引入;this.queryId = this.$route.query.Id---->query引入(当然用name也行)

对于需要进行安全保护的网站其实也可以在此处进行选择params-->name(不显示路径如index/login)--->当然这只是相对query.-->path(显示?后面带的参数如index/login?id=1&&name=asd)安全的方法.

需要说明的这种方法在有的页面刷新会丢失传过来的数据,就是不太稳定。下面是另一个传参的方法倒是可以解决这种问题,先看代码:

request.get('shop/ce/' + this.product_id +'? num='+this.num ,{
          id:this.product_id,
          num:this.num,
        }).then((response) => {
          if(response){
            console.log(this.product_id)
            this.$router.push({path:'/order?pid='+this.product_id})
          }  
        }).catch((ex) => {
        console.log(ex.response)
        })

上面的request只是我封装的一个axios请求方法(主要是方便,不多说),看红线重点,这个地方的传参其实是很优秀的,自己在定义一个变量接收id,因为是写在跳转路径里面的,这样在刷新时人家会一直带着这个ID,数据自然就不会丢失了,在需要接受ID的页面用

this.product_id = this.$route.query.pid存一下就OK了。因此觉得这个方法挺好,需要多加注意。
既然说到这了,我们常用的其实还有抓取不同的id,传给后台,常见的有点击不同列表的商品获取对应的ID,这里我就说一下我用的方法(这个仅仅是记录下)。

<div class="main" v-for="(item,index) in Unpaycontent" :key="index">
            <div class="main_top">
              <div class="imgContral">
                <img :src="item.goods_image">
                <div class="describtion"><a>待支付</a></div>
              </div>
              <div class="details"><p style="color:#000;">{{item.goods_name}}</p></div>
              <div class="main_topright">
                <p>{{item.price}}</p>
                <p>×{{item.num}}</p>
              </div>
              <div class="top_bottom">
                <span style="float:right;">合计:<a style="color:red;">{{item.total_price}}</a></span>
              </div>
            </div>
            <div class="main_bot">
                <a @click="click(item.id)">立即支付</a>
            </div>
          </div>

还是看红线,因为我们在点击的时候传的有item.id,这就解决了传不同ID的头疼问题,在methods里用方法接受时随便定义下改个好看的名字就能很好的把ID拿出来传到后台了,为了展示的详细点,还是贴一下代码吧。

getallData (index) {
      request.get('/shop/orders'+index, {
        
        }).then((response) => {
         
        }).catch((ex) => {
      }) 
    },

这里的item.id就被我变成了index了,其他的就是愉快的给后台解决了。

本文主要是对传参进行简短总结下,如果有其他的好的传参的方法或者本篇我写的有错的地方,欢迎指教!

以上所述是小编给大家介绍的vue路由对不同界面进行传参及跳转的总结详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue parseHTML源码解析hars end comment钩子函数

    vue parseHTML源码解析hars end comment钩子函数

    这篇文章主要为大家介绍了vue parseHTML源码解析hars end comment钩子函数示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

    vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

    这篇文章主要介绍了vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • antd vue table表格内容如何格式化

    antd vue table表格内容如何格式化

    这篇文章主要介绍了antd vue table表格内容如何格式化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • 详解vue-cli3使用

    详解vue-cli3使用

    这篇文章主要介绍了详解vue/cli 3使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue移动端下拉刷新和上拉加载的实现代码

    vue移动端下拉刷新和上拉加载的实现代码

    这篇文章主要介绍了vue移动端下拉刷新和上拉加载的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue跳转同一路由报错的问题及解决

    vue跳转同一路由报错的问题及解决

    这篇文章主要介绍了vue跳转同一路由报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue中的数据格式化filters、formatter方式

    vue中的数据格式化filters、formatter方式

    这篇文章主要介绍了vue中的数据格式化filters、formatter方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 如何使用 vxe-table 将行数据标记为删除状态

    如何使用 vxe-table 将行数据标记为删除状态

    vxe-table支持将数据标记为待删除状态,通过调用setPendingRow方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • vue实现固定位置显示功能

    vue实现固定位置显示功能

    这篇文章主要介绍了vue实现固定位置显示功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue源码探究之状态初始化

    Vue源码探究之状态初始化

    这篇文章主要介绍了Vue源码探究之状态初始化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论