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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
react-native android状态栏的实现
Jun 15 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python中的包和模块实例
2014/11/22 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
python读取与处理netcdf数据方式
2020/02/14 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python中Yield的基本用法
2020/10/18 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
有针对性的求职自荐信
2013/11/14 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
迟到检讨书大全
2014/01/25 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
入党政审材料范文
2014/12/24 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
python实现股票历史数据可视化分析案例
2021/06/10 Python
利用Redis实现点赞功能的示例代码
2022/06/28 Redis