今天接到了比較大的需求，由于這個(gè)公司的接口調(diào)用方法和上一段實(shí)習(xí)那家公司的寫法很不一樣，我花了很多時(shí)間在摸索，“踏出第一步總是最困難的”，果然沒(méi)錯(cuò)，第一個(gè)很費(fèi)勁，但完成之后有了思路，下面的任務(wù)也就完成得更順利了一些。簡(jiǎn)單記錄一下吧！

主要步驟：

1.首先要配置一下接口

【api.js】

2.在使用的地方先引入方法

【跳轉(zhuǎn)到的頁(yè)面】

3.調(diào)用的時(shí)候要注意是傳什么類型的參數(shù)，不然請(qǐng)求不回想要的數(shù)據(jù)

【切記切記看一下接口文檔】

4.配置跳轉(zhuǎn)路由，并傳出參數(shù)（注意類型）

【今天我一開始傳了個(gè)對(duì)象類型："userKey":"5"，旁邊的姐姐幫我看了一下，最后改成了userKey:5傳過(guò)去，果然就返回了正確的數(shù)據(jù)?！?/p>

5.在跳轉(zhuǎn)到的頁(yè)面中，一定要記得取出參數(shù) this.$route.query/param（看情況）

【有些是傳遞參數(shù)，有些是查詢參數(shù)，有點(diǎn)區(qū)別】

 今天一開始沒(méi)有頭緒的，主要是通過(guò)一個(gè)博主的文章得到了啟發(fā)，感謝他！

一、關(guān)于點(diǎn)擊事件實(shí)現(xiàn)跳轉(zhuǎn)并傳遞參數(shù)的方法

用到了this.$router.push()

1.首先我們要定義一個(gè)點(diǎn)擊事件
2.在定義事件中調(diào)用this.$router.push()方法

<template>
	<button @click = "handle">點(diǎn)擊跳轉(zhuǎn)</button>
</template>
<script>
    export default{
        methods:{
            handle (){
            //  路徑/home對(duì)應(yīng)我在router目錄下index.js中定義的path屬性值
                this.$router.push('/home');
            }
        }
    }
</script>

 目標(biāo)跳轉(zhuǎn)頁(yè)面路由在router目錄下index.js定義如下：

export default new Router({
  routes: [
    {
      path: '/home',
      name:'Home',
      component: Home,
    },
 ]
})

二、this.$router.push()中的參數(shù)規(guī)則

參數(shù)為字符串，即路徑名稱

//  路徑/home對(duì)應(yīng)router目錄下index.js中定義的path屬性值
this.$router.push('/home');

參數(shù)為對(duì)象

//  對(duì)應(yīng)router目錄下index.js中定義的path
this.$router.push({path:'/home'});

參數(shù)為路由命名

//  對(duì)應(yīng)router目錄下index.js中定義的name
this.$router.push({name:'Home'});

帶傳遞參數(shù)

// params里面放置的是我們要傳遞過(guò)去的參數(shù)
this.$router.push({name:'Home',params:{user:'david'}});

 帶查詢參數(shù)

// 帶查詢參數(shù)，傳遞過(guò)去的內(nèi)容會(huì)自動(dòng)拼接變成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

三、參數(shù)的接收

當(dāng)我們使用params進(jìn)行傳參時(shí)，只需在接收參數(shù)的地方使用this.$route.params進(jìn)行接收即可

//傳參
this.$router.push({name:'Home',params:{user:'david'}});
 
// 在name為Home的組件中接收參數(shù)
const id=this.$route.params.id;
console.log(this.$route.params);//打印結(jié)果為{user:'david'}

當(dāng)我們使用query傳參時(shí)，只需在接收參數(shù)的地方使用this.$route.query進(jìn)行接收即可，用法同上
?。。∵@里有一個(gè)小細(xì)節(jié)：$符號(hào)后面跟的是route不是router，跳轉(zhuǎn)的時(shí)候 $后面跟的是router?。。?/p>

四、傳遞的參數(shù)是對(duì)象或數(shù)組        

還有一種情況就是，如果通過(guò)query方式傳遞的是 對(duì)象或數(shù)組 ，在地址欄中會(huì)被強(qiáng)制轉(zhuǎn)換成[object Object]，刷新后頁(yè)獲取不到對(duì)象值。

        那么我們可以通過(guò)JSON.stringify()方法將參數(shù)轉(zhuǎn)換為字符串，在獲取參數(shù)時(shí)通過(guò)JSON.parse轉(zhuǎn)換成對(duì)象。

let parObj = JSON.stringify(obj)
// 路由跳轉(zhuǎn)
this.$router.push({
   path:'/detail',
   query:{
       obj:parObj
   }
})
 
// 詳情頁(yè)獲取參數(shù)
JSON.parse(this.$route.query.obj)

注意：這樣雖然可以傳對(duì)象，但是如果數(shù)據(jù)多的話地址欄會(huì)很長(zhǎng)(不太推薦)。 使用props配合組件路由解耦：

①路由配置中指定參數(shù):id

// 路由配置
{
   path:'/detail/:id',
   name:'detail',
   component:Detail,
   props:true  // 如果props設(shè)置為true，$route.params將被設(shè)置為組件屬性  
}
 
// 路由跳轉(zhuǎn)
this.$router.push({
   path:`/detail/${id}`
})
 
// 詳情頁(yè)獲取參數(shù)
export default {
  props:['id'],  // 將路由中傳遞的參數(shù)id解耦到組件的props屬性上
  mounted(){
    console.log("id",this.id);  
  }
}

②路由配置中未指定參數(shù)

// 路由配置
{
   path:'/detail',
   name:'detail',
   component:Detail,
   props:true  // 如果props設(shè)置為true，$route.params將被設(shè)置為組件屬性  
}
 
// 路由跳轉(zhuǎn)
this.$router.push({
   name:'detail',
   params:{
       order:{
         id:'123456789',
         name:'商品名稱'  
       }
   }
})
 
// 詳情頁(yè)獲取參數(shù)
export default {
  props:['order'],  // 將路由中傳遞的參數(shù)order解耦到組件的props屬性上
  mounted(){
    console.log("order",this.order);  
  }
}

注意 用${JSON.stringify(this.data)}取數(shù)據(jù)有長(zhǎng)度限制，所以會(huì)取不出來(lái)數(shù)據(jù)，換成setStorageSync和getStorageSync就好了

一開始：

結(jié)果取不出來(lái)

修改后：

取出來(lái)了

 query傳參的參數(shù)會(huì)帶在url后邊展示在地址欄(/home?user=david)，params傳參的參數(shù)不會(huì)展示到地址欄

this.$route.query（刷新頁(yè)面后參數(shù)不會(huì)丟失）

this.$route.params（刷新頁(yè)面后參數(shù)會(huì)丟失）

由于動(dòng)態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無(wú)效，需要用name來(lái)指定頁(yè)面
我們也可以用this.$router.replace()來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，二者的區(qū)別是push跳轉(zhuǎn)之后可以通過(guò)瀏覽器的回退鍵回到原來(lái)的頁(yè)面，而一旦使用replace跳轉(zhuǎn)之后，無(wú)法回到原來(lái)頁(yè)面

到此這篇關(guān)于vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法匯總的文章就介紹到這了,更多相關(guān)vue 中this.$router.push()路由傳值和獲取內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論