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

30e8336b8229 發布于2019-08-22 18:21 / 2761人閱讀

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

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

概念圖

原理

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

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

清單:

通過瀏覽器插件vue devtools(vue 開發者工具插件)可以看的到$route屬性內部的具體數據:

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

在路由里定義

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

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

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

//App.vue

          點擊就跳轉到page9,并同時傳參到Vue.$route.params

//Page9.vue

意思是最后Vue.$route.params會儲存{"abc" : "gigi" ,"cde" : "lkjdk7338"}

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

js:

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

意思是是最后Vue.$route.params會儲存{"abc" : this.mydata這個數據 ,"cde" : ""dlj""}

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

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

云服務器 GPU云服務器 vue的計算屬性 vue實例屬性 vue.js 屬性 vue的cdn加速

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95762.html

vue常用操作及學習筆記（路由跳轉及路由傳參篇）

摘要：也可以從其他文件進來定義路由每個路由應該映射一個組件。其中可以是通過創建的組件構造器，或者，只是一個組件配置對象。路由跳轉 - 超鏈接方式跳轉 html： Hello App! Go to Foo Go to Bar router.js...

megatron 2019-08-23 11:27 評論0 收藏0
vue-router query和params傳參(接收參數)$router $route的區別

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

testHs 2019-08-21 18:41 評論0 收藏0
vue路由

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

developerworks 2019-08-26 13:50 評論0 收藏0
手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

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

Sourcelink 2019-08-02 14:02 評論0 收藏0
手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

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

AlphaWallet 2019-08-23 14:28 評論0 收藏0