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

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里貯存屬性&＃8221;abc&＃8221;和&＃8221;cde&＃8221;,它們是作為屬性名,鍵名key,

而屬性值則由點擊路由后觸發途徑的變化來決議詳細的值.要傳輸什麼就寫什麼,比方

//App.vue

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


//Page9.vue



意義是末了Vue.$route.params會貯存{&＃8220;abc&＃8221; : &＃8220;gigi&＃8221; ,&＃8221;cde&＃8221; : &＃8220;lkjdk7338&＃8221;}

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

點擊就跳轉到page9,並同時傳參到

js:

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

意義是是末了Vue.$route.params會貯存{&＃8220;abc&＃8221; : this.mydata這個數據 ,&＃8221;cde&＃8221; : &＃8221;dlj&＃8221;}

怎樣拿值:
這就很簡單了:
直接從Vue.$route.params里拿就好了
{{ $route.params.abc }} &＃8211;> &＃8220;gigi&＃8221; 或許 this.mydata詳細的值

{{ $route.params.abc }} &＃8211;> &＃8221; lkjdk7338 &＃8220;