透過Vue屬性$route的params傳參

這篇文章主要介紹了關於透過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>
    <p class="page1">
        <h1>{{ msg }}</h1>
        <p>{{this.$route.params}}</p>
        <h3 @click="nsj">拿数据</h3>
    </p>
</template>

<script>
    export default{
        name:&#39;Page9&#39;,
        data(){
            return{
                msg:&#39;I am Page9.vue&#39;
            }
        },
        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 "以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

###相關推薦：#########vue-router nginx非根路徑的設定方法###############vue如何解決addRoutes動態新增路由後刷新失效的問題######

以上是透過Vue屬性$route的params傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章！