成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

(原創(chuàng))vue傳參之通過Vue屬性$route的params傳參

30e8336b8229 / 2769人閱讀

摘要：傳值與傳參是兩塊東西概念圖原理傳參的原理主要在于也有是的屬性是的屬性用來儲(chǔ)存數(shù)據(jù)的鍵值對對象形式儲(chǔ)存很多屬性鍵值對屬性屬性值在里面清單通過瀏覽器插件開發(fā)者工具插件可以看的到屬性內(nèi)部的具體數(shù)據(jù)可以說于是一個(gè)中間容器用來容納參數(shù)是鍵值對的方式這

vue傳值 與 vue傳參是兩塊東西

概念圖

原理

vue傳參的原理主要在于 Vue.$route.params (也有 $route.query)

$route是Vue的屬性,params是$route的屬性,用來儲(chǔ)存數(shù)據(jù)的鍵值對(對象形式,{key:value}),儲(chǔ)存很多屬性(鍵值對,屬性,屬性值)在里面.

清單:

通過瀏覽器插件vue devtools(vue 開發(fā)者工具插件)可以看的到$route屬性內(nèi)部的具體數(shù)據(jù):

$route.params,**可以說于$route是一個(gè)中間容器**,用來容納參數(shù),是鍵值對的方式,這樣在這個(gè)頁面執(zhí)行動(dòng)作傳遞參數(shù)到$route.params,在另外一個(gè)頁面就能從$route.params里拿參數(shù),就這么回事.

在路由里定義

//router >> index.js
{
        path: "/Page9/:abc/:cde",
        name: "Page9",
        component: Page9
    }

意思就是我要往 Vue.$route.params里儲(chǔ)存屬性"abc"和"cde",它們是作為屬性名,鍵名key,

而屬性值則由點(diǎn)擊路由后觸發(fā)路徑的變化來決定具體的值.要傳輸什么就寫什么,比如

//App.vue

          點(diǎn)擊就跳轉(zhuǎn)到page9,并同時(shí)傳參到Vue.$route.params

//Page9.vue

意思是最后Vue.$route.params會(huì)儲(chǔ)存{"abc" : "gigi" ,"cde" : "lkjdk7338"}

或者用編程路由的寫法,在腳本js里寫要傳的參:
html:

js:

sj1() {
                this.$router.push({
                    path: "/Page9",
                    name: "Page9",
                    params: {
                        abc: this.mydata,
                        cde: "dlj"
                    }
                })

意思是是最后Vue.$route.params會(huì)儲(chǔ)存{"abc" : this.mydata這個(gè)數(shù)據(jù) ,"cde" : ""dlj""}

如何拿值:
這就很簡單了:
直接從Vue.$route.params里拿就行了
{{ $route.params.abc }} --> "gigi" 或者 this.mydata具體的值

{{ $route.params.abc }} --> " lkjdk7338 "

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95762.html

相關(guān)文章

  • vue常用操作及學(xué)習(xí)筆記（路由跳轉(zhuǎn)及路由傳參篇）

    摘要：也可以從其他文件進(jìn)來定義路由每個(gè)路由應(yīng)該映射一個(gè)組件。其中可以是通過創(chuàng)建的組件構(gòu)造器，或者，只是一個(gè)組件配置對象。 路由跳轉(zhuǎn) - 超鏈接方式跳轉(zhuǎn) html： Hello App! Go to Foo Go to Bar router.js...

    megatron 評論0 收藏0

  • vue-router query和params傳參(接收參數(shù))$router $route的區(qū)別

    今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑（query和params），所以決定總結(jié)一下二者的區(qū)別。 直接總結(jié)干貨！?。?1.query方式傳參和接收參數(shù) 傳參: this.$router.push({ path:/xxx, query:{ id:id } }) 接收參數(shù): this.$route.quer...

    testHs 評論0 收藏0

  • vue路由

    摘要：分類子組件中通過獲取參數(shù)傳參路由配置分類父組件中通過路由屬性中的來確定匹配的路由，通過來傳遞參數(shù)。分類子組件中通過獲取參數(shù)區(qū)別是把參數(shù)放在地址欄上，刷新不會(huì)消失，不會(huì)把參數(shù)放在地址上，刷新后消失 vue路由使用 1.安裝vue路由 npm install vue-router 2.在src中新建router/index.js,引入vue路由 import Vue from vue im...

    developerworks 評論0 收藏0

  • 手挽手帶你學(xué)VUE：四檔 Vue-cli3 Vuex Vue-router

    摘要：安裝過后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進(jìn)行下面的步驟了。全局安裝的包名稱由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個(gè)都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)。 視頻教程 由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學(xué)到什么 在這一期的學(xué)習(xí)進(jìn)度中，我們會(huì)開始學(xué)習(xí)在我們工作開...

    Sourcelink 評論0 收藏0

  • 手挽手帶你學(xué)VUE：四檔 Vue-cli3 Vuex Vue-router

    摘要：安裝過后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進(jìn)行下面的步驟了。全局安裝的包名稱由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個(gè)都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)。 視頻教程 由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學(xué)到什么 在這一期的學(xué)習(xí)進(jìn)度中，我們會(huì)開始學(xué)習(xí)在我們工作開...

    AlphaWallet 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<