vue-router傳參的4種方式超詳細講解

Posted on by

一、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傳參的4種方式的文章就介紹到這瞭,更多相關vue-router傳參方式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：