vue-router傳參的方式實例分析

本文小編為大家詳細介紹“vue-router傳參的方式實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue-router傳參的方式實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、router-link路由導航方式傳參

父組件：<router-link to="/跳轉到的路徑/傳入的參數"></router-link>

子組件：this.$route.params.content接受父組件傳遞過來的參數

例如：

路由配置：

bashbash{path:'/father/son/:num',name:A,component:A}```

地址欄中的顯示：

http://localhost:8080/#/father/son/44

調用方法：

<router-link to="/father/son/傳入的參數">父親組件<router-link>
 子組件通過  this.$route.params.num 接受參數

二、調用$router.push實現路由傳參

父組件：通過實踐觸發，跳轉代碼

<button @click="clickHand(123)">push傳參</button>
  methods: {
    clickHand(id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

路由配置

{path: '/d/:id', name: D, component: D}

地址欄中顯示：

http://localhost:8080/d/123

子組件接受參數方式

mounted () {
  this.id = this.$route.params.id
}

三、通過路由屬性name匹配路由，再根據params傳遞參數

父組件：

<button @click="ClickByName()">params傳參</button>
    ClickByName() {
      this.$router.push({
        name: 'B',
        params: {
          context: '吳又可吳又可吳又可'
        }
      })
    }

路由配置：路徑后不需要在加上傳入的參數，但是name必須和父組件中的name一致

{path: '/b', name: 'B', component: B}

地址欄中的顯示：地址欄不會帶有傳入的參數，而且再次刷新頁面后參數會丟失

http://localhost:8080/#/b

子組件接收參數的方式：

<template>
  <div id="b">
    This is page B!
    <p>傳入參數：{{this.$route.params.context}}</p>
  </div>
</template>

四、通過query來傳遞參數

父組件：

<button @click="clickQuery()">query傳參</button>
    clickQuery() {
      this.$router.push({
        path: '/c',
        query: {
          context: '吳又可吳又可'
        }
      })
    }

路由配置：不需要做任何修改

{path: '/c', name: 'C', component: C}

地址欄中的顯示(中文轉碼格式)：

http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

子組件接受方法：

<template>
  <div id="C">
    This is page C!
    <p>這是父組件傳入的數據: {{this.$route.query.context}}</p>
  </div>
</template>

讀到這里，這篇“vue-router傳參的方式實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。