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


Posted in Javascript onApril 20, 2019

最近在做一个公众号的商城项目,主要用的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路由对不同界面进行传参及跳转的总结详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 #Javascript
详解vue使用$http服务端收不到参数
Apr 19 #Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 #Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 #Javascript
读懂CommonJS的模块加载
Apr 19 #Javascript
js module大战
Apr 19 #Javascript
如何根据业务封装自己的功能组件
Apr 19 #Javascript
You might like
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
金智子午JAVA面试题
2015/09/04 面试题
中学生操行评语大全
2014/04/24 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
治庸问责心得体会
2014/09/12 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
2014年防汛工作总结
2014/12/08 职场文书
经营场所使用证明
2015/06/19 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
数据库连接池
2021/04/06 MySQL
解析python中的jsonpath 提取器
2022/01/18 Python
tree shaking对打包体积优化及作用
2022/07/07 Java/Android