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

最近在做一个公众号的商城项目，主要用的VUE+MUI，其实今天这个点对于有过项目经验的前端工作者来说是最基础的，但也是必须要掌握的，今天小编主要是记录下传参和跳转的一些总结（仅供参考）。

我们提供的服务有：成都做网站、网站设计、微信公众号开发、网站优化、网站认证、会泽ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的会泽网站制作公司

首先我们先上代码吧！

 
  

     
      点击编辑
  
　

这个是我常用的传参及跳转路由的方法，下面剪短说一下这个代码，在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，这里我就说一下我用的方法(这个仅仅是记录下)。

            

              

                
                
待支付
              
              
{{item.goods_name}}
              

                
{{item.price}}
                
×{{item.num}}
              
              

                合计：{{item.total_price}}
              
            
            

                立即支付
            
          

还是看红线，因为我们在点击的时候传的有item.id，这就解决了传不同ID的头疼问题，在methods里用方法接受时随便定义下改个好看的名字就能很好的把ID拿出来传到后台了，为了展示的详细点，还是贴一下代码吧。

getallData (index) {
      request.get('/shop/orders'+index, {
        
        }).then((response) => {
         
        }).catch((ex) => {
      }) 
    },

这里的item.id就被我变成了index了，其他的就是愉快的给后台解决了。

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

以上所述是小编给大家介绍的vue路由对不同界面进行传参及跳转的总结详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！