(原創)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裏儲存屬性"abc"和"cde",它們是做爲屬性名,鍵名key,

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

//App.vue
<router-link to="/Page9/gigi/lkjdk7338">
          點擊就跳轉到page9,並同時傳參到Vue.$route.params
</router-link>

//Page9.vue
<template>
    <div class="page1">
        <h1>{{ msg }}</h1>
        <p>{{this.$route.params}}</p>
        <h3 @click="nsj">拿數據</h3>
    </div>
</template>

<script>
    export default{
        name:'Page9',
        data(){
            return{
                msg:'I am Page9.vue'
            }
        },
        methods:{
            nsj(){
                this.msg = this.$route.params.asd
            }
        }
        
    }
</script>

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

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

<p><button @click="sj1">點擊就跳轉到page9,並同時傳參到</button></p>

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 "