最近在做一个公众号的商城项目, 主要用的 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 了, 其他的就是愉快的给后台解决了.
本文主要是对传参进行简短总结下, 如果有其他的好的传参的方法或者本篇我写的有错的地方, 欢迎指教!
来源: https://www.cnblogs.com/yangc6925/p/10737164.html