vue路由傳值的幾種方式是什麼

vue路由傳值的方式：1、利用「router-link」路由導航來傳遞；2、呼叫「$router.push」實現路由傳參數值；3、透過路由屬性中的name匹配路由，再根據params傳遞參數值；4、透過query來傳遞參數值。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vue路由傳參值的方法

一、router-link路由導航

父元件: 使用747fd8ad9a64933b02f32bf165e058e2d625018d6d57dc2163f3a71531b24864

例如：e756d52f1f9f49587ff16d14ff392c30routerlink傳參d625018d6d57dc2163f3a71531b24864

子元件: this.$route.params.num接收父元件傳遞過來的參數

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

路由配置:：{path: '/a/:num', name: A, component: A}

#網址列中的顯示:：http://localhost:8080/#/a/123

##二、呼叫$router.push實作路由傳參

父元件: 綁定點擊事件，寫跳轉程式碼

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

子元件: this.$route.params.id接收父元件傳遞過來的參數

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

路由設定:：{path: '/d/:id' , name: D, component: D}

網址列中的顯示:：http://localhost:8080/#/d/123

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

父元件: 匹配路由配置好的屬性名稱

<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: &#39;B&#39;,
        params: {
          sometext: &#39;一只羊出没&#39;
        }
      })
    }

子元件:

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.sometext}}</p>
  </div>
</template>

路由設定: 路徑後面不需要再加傳入的參數，但是name必須和父元件中的name一致
{path: '/b', name: 'B', component: B}

網址列中的顯示: 可以看出網址列不會帶有傳入的參數，而且再重新刷新頁面後參數會遺失
http://localhost: 8080/#/b

四、透過query來傳遞參數

##父元件:

<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: &#39;/c&#39;,
        query: {
          sometext: &#39;这是小羊同学&#39;
        }
      })
    }

子元件:

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
  </div>
</template>

路由設定:

不需要做任何修改{path: '/c', name: 'C', component: C}

網址列中的顯示:

(中文做了轉碼)http://localhost:8080/ #/c?sometext=這是小羊同學
相關推薦：《

vue.js教學

》

以上是vue路由傳值的幾種方式是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！