文档章节

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

o
 osc_gu9d45li
发布于 2019/04/19 17:08
字数 945
阅读 31
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

最近在做一个公众号的商城项目,主要用的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了,其他的就是愉快的给后台解决了。

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue-router总结

之前写过一篇关于vue-router的文章,主要是介绍怎么结合cli2在项目中使用vue-router,比较的简单,今天想结合cli3来总结一下vue-router的具体用法。 cli3 在介绍vue-router前,先简单介绍一下...

osc_s93p9oy1
2019/01/12
2
0
vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境、跨域问题

[TOC] 一、VUE项目的搭建 步骤: 1. 环境搭建 共有3步 2. 项目的创建和启动 注意:创建vue项目,用终端来的命令式创建最合适,不要用编辑器来创建 第二步配置截图 图一: 图二: 图三: 图四...

osc_v0vk38s3
2019/12/20
19
0
[Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

一、前言   在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由、命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传...

osc_d4gurmqk
2019/07/03
5
0
[Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

一、前言   在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由。但是在实际使用中,我们经常会遇到路由传参、或者一个页面是由...

osc_tr9tcucx
2019/06/17
10
0
react router @4 和 vue路由 详解(全)

react router @4 和 vue路由 本文大纲: 1、vue路由基础和使用 2、react-router @4用法 3、什么是包容性路由?什么是排他性路由? 4、react路由有两个重要的属性:children和render的区别? ...

osc_2g1pfov3
2018/12/05
17
0

没有更多内容

加载失败,请刷新页面

加载更多

VB语言基础重要知识点12

我们课程,我们做一些针对于考试的简要讲解。 一、有关考试的几个问题 首先,提问:考试最重要的是什么? 答案其实很简单:得分!!!!! 想要得分,就要做到基本的保存。 保存哪些文件呢?...

刘金玉编程
2019/10/30
5
0
全网最全JAVA、Python电子书!限时领取,过时不候!

给大家整理了最全的入门+进阶书籍!!! 免费领取,无套路! 加微信发送“电子书” 秒通过,秒发资源! 本文分享自微信公众号 - Python进击者(JAVAandPythonJun)。 如有侵权,请联系 supp...

kuls
01/16
18
0
原创356--免费还是付费

最近得有一个星期,被一个录屏软件(record it)烦到了,本来免费版可以无限制录制,只能720p,GIF不支持,高清不支持,没有剪辑功能。 之前调研了好几种,用起来还是这个方便,就一直用了。...

八音弦
04/24
14
0
数字IC技术讨论群,设计和验证、前端和后端,总有你感兴趣的话题。快满了,需要的抓紧加入。

本文分享自微信公众号 - 白山头讲IC(gray_mount)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

白山头
04/29
5
0
how to install mongodb in centos7

[root@xtwj88 ~]# cat /etc/yum.repos.d/mongodb-org-4.2.repo [mongodb-org-4.2]name=MongoDB Repositorybaseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.2/x86......

qwfys
49分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部