最近在做一個(gè)公眾號(hào)的商城項(xiàng)目，主要用的VUE+MUI，其實(shí)今天這個(gè)點(diǎn)對(duì)于有過(guò)項(xiàng)目經(jīng)驗(yàn)的前端工作者來(lái)說(shuō)是最基礎(chǔ)的，但也是必須要掌握的，今天小編主要是記錄下傳參和跳轉(zhuǎn)的一些總結(jié)（僅供參考）。

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、會(huì)澤ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的會(huì)澤網(wǎng)站制作公司

首先我們先上代碼吧！

 
  

     
      點(diǎn)擊編輯
  
　

這個(gè)是我常用的傳參及跳轉(zhuǎn)路由的方法，下面剪短說(shuō)一下這個(gè)代碼，在router-link中:to后面跟著的就是主角（跳轉(zhuǎn)、傳參）的內(nèi)容了，其實(shí)我們?cè)趶暮笈_(tái)拿到數(shù)據(jù)遍歷后，每一個(gè)對(duì)應(yīng)的id都會(huì)有，這里用的query:{id:item,id},其實(shí)就是把遍歷對(duì)應(yīng)的id傳到path

對(duì)應(yīng)的那個(gè)界面，這個(gè)常出現(xiàn)在列表頁(yè)到詳情頁(yè)頁(yè)這里（當(dāng)然不只是這里了，其他地方用的很多很多）。

對(duì)于傳參的方式還是要說(shuō)下的多余的：

query和params：

a.像這種:to="{path:'/editaddress',query:{ id:item.id }}是query進(jìn)行傳值；這種:to="{path:'/editaddress',params:{ id:item.id }},兩種方式傳值沒(méi)什么差別，

但比如在詳情頁(yè)引入值時(shí)this.paramsid = this.$route.params.id ---->params引入；this.queryId = this.$route.query.Id---->query引入(當(dāng)然用name也行)

對(duì)于需要進(jìn)行安全保護(hù)的網(wǎng)站其實(shí)也可以在此處進(jìn)行選擇params-->name(不顯示路徑如index/login)--->當(dāng)然這只是相對(duì)query.-->path(顯示?后面帶的參數(shù)如index/login?id=1&&name=asd)安全的方法.

需要說(shuō)明的這種方法在有的頁(yè)面刷新會(huì)丟失傳過(guò)來(lái)的數(shù)據(jù)，就是不太穩(wěn)定。下面是另一個(gè)傳參的方法倒是可以解決這種問(wèn)題，先看代碼：

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只是我封裝的一個(gè)axios請(qǐng)求方法(主要是方便，不多說(shuō))，看紅線重點(diǎn)，這個(gè)地方的傳參其實(shí)是很優(yōu)秀的,自己在定義一個(gè)變量接收id，因?yàn)槭菍懺谔D(zhuǎn)路徑里面的，這樣在刷新時(shí)人家會(huì)一直帶著這個(gè)ID,數(shù)據(jù)自然就不會(huì)丟失了，在需要接受ID的頁(yè)面用

this.product_id = this.$route.query.pid存一下就OK了。因此覺(jué)得這個(gè)方法挺好，需要多加注意。
既然說(shuō)到這了，我們常用的其實(shí)還有抓取不同的id，傳給后臺(tái)，常見(jiàn)的有點(diǎn)擊不同列表的商品獲取對(duì)應(yīng)的ID，這里我就說(shuō)一下我用的方法(這個(gè)僅僅是記錄下)。

            

              

                
                
待支付
              
              
{{item.goods_name}}
              

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

                合計(jì)：{{item.total_price}}
              
            
            

                立即支付
            
          

還是看紅線，因?yàn)槲覀冊(cè)邳c(diǎn)擊的時(shí)候傳的有item.id，這就解決了傳不同ID的頭疼問(wèn)題，在methods里用方法接受時(shí)隨便定義下改個(gè)好看的名字就能很好的把ID拿出來(lái)傳到后臺(tái)了，為了展示的詳細(xì)點(diǎn)，還是貼一下代碼吧。

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

這里的item.id就被我變成了index了，其他的就是愉快的給后臺(tái)解決了。

本文主要是對(duì)傳參進(jìn)行簡(jiǎn)短總結(jié)下，如果有其他的好的傳參的方法或者本篇我寫的有錯(cuò)的地方，歡迎指教！

以上所述是小編給大家介紹的vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！