欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中this.$router.push()路由傳值和獲取的兩種常見方法匯總

 更新時(shí)間:2022年12月15日 10:15:45   作者:小白探索世界歐耶!~  
這篇文章主要介紹了vue中this.$router.push()路由傳值和獲取的兩種常見方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

           今天接到了比較大的需求,由于這個(gè)公司的接口調(diào)用方法和上一段實(shí)習(xí)那家公司的寫法很不一樣,我花了很多時(shí)間在摸索,“踏出第一步總是最困難的”,果然沒錯(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傳過去,果然就返回了正確的數(shù)據(jù)?!?/p>

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

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

 今天一開始沒有頭緒的,主要是通過一個(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里面放置的是我們要傳遞過去的參數(shù)
this.$router.push({name:'Home',params:{user:'david'}});

 帶查詢參數(shù)

// 帶查詢參數(shù),傳遞過去的內(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?。?!

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

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

        那么我們可以通過JSON.stringify()方法將參數(shù)轉(zhuǎn)換為字符串,在獲取參數(shù)時(shí)通過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)之后可以通過瀏覽器的回退鍵回到原來(lái)的頁(yè)面,而一旦使用replace跳轉(zhuǎn)之后,無(wú)法回到原來(lái)頁(yè)面

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

相關(guān)文章

  • vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法

    vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法

    這篇文章主要給大家介紹了關(guān)于vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法,在Vue的模板中,我們可以將下載屬性綁定至或元素上,用來(lái)實(shí)現(xiàn)點(diǎn)擊下載,需要的朋友可以參考下
    2023-08-08
  • Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例

    Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例

    這篇文章主要給大家介紹了Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • vue實(shí)現(xiàn)下拉菜單樹

    vue實(shí)現(xiàn)下拉菜單樹

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉菜單樹,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • 基于vuejs+webpack的日期選擇插件

    基于vuejs+webpack的日期選擇插件

    這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)的思路詳解

    基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)的思路詳解

    這篇文章主要介紹了基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級(jí)結(jié)構(gòu)與用法示例

    Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)

    最近在使用Element開發(fā)時(shí)遇到了不少問題,下面這篇文章主要給大家介紹了關(guān)于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級(jí)結(jié)構(gòu)與用法的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例

    vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例

    在實(shí)際項(xiàng)目開發(fā)中,我們經(jīng)常會(huì)遇到選項(xiàng)卡切換,對(duì)于一個(gè)前端工程師來(lái)說(shuō),組件化/模塊化開發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • vue引入elementUi后打開頁(yè)面報(bào)錯(cuò)Uncaught?TypeError的解決方式

    vue引入elementUi后打開頁(yè)面報(bào)錯(cuò)Uncaught?TypeError的解決方式

    這篇文章主要給大家介紹了關(guān)于vue引入elementUi后打開頁(yè)面報(bào)錯(cuò)Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解決方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)問題

    Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)問題

    這篇文章主要介紹了Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-08-08
  • vue-quill-editor如何設(shè)置字體大小

    vue-quill-editor如何設(shè)置字體大小

    這篇文章主要介紹了vue-quill-editor如何設(shè)置字體大小,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評(píng)論