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了,其他的就是愉快的给后台解决了。

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

 

人已赞赏
随笔日记

atx-agent minicap、minitouch源码分析

2020-11-9 4:29:17

随笔日记

wGenerator代码生成工具

2020-11-9 4:29:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索