vue傳參之通過Vue屬性$route的params傳參

(注意:vue傳值 與 vue傳參是兩塊東西!)

概念圖

原理

vue傳參的原理主要在於 Vue.$route.params和有 $route.query

$route是Vue的屬性.params是$route的屬性,用來儲存資料的鍵值對.就是說它物件,儲存很多屬性(鍵值對,屬性,屬性值)在裡面.

清單:

通過瀏覽器外掛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 "