vuejs中跳轉如何傳參

vue跳轉傳參的方法：1、通過router-link標籤的params或query屬性進行跳轉傳參；2、通過「this.$router.push({name:'路由命名',params:{引數名:引數值..}})」語句進行跳轉傳參。

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

首先建立readDetail.vue 且在index.js中註冊路由。

傳遞頁面方式：

1.通過router-link進行跳轉

<router-link   
    :to="{  
        path: 'yourPath',     
        params: {   
            key: 'value', // orderNum : this.searchData.orderNo
        },  
        query: {  
           key: 'value', // orderNum : this.searchData.orderNo
        }  
    }">  
    <button type="button">跳轉</button> 
</router-link> 

 1. path -> 是要跳轉的路由路徑,也可以是路由檔案裡面設定的 name 值,兩者都可以進行路由導航  
 2. params -> 是要傳送的引數,引數可以直接key:value形式傳遞  
 3. query -> 是通過 url 來傳遞引數的同樣是key:value形式傳遞

2. $router方式跳轉

this.$router.push({name:'路由命名',params:{引數名:引數值,引數名:引數值}})

 this.$router.push({  
            path: 'yourPath',   
            name: '要跳轉的路徑的 name,在 router 資料夾下的 index.js 檔案內找',  
            params: {   
                key: 'key',   
                msgKey: this.msg  
            }  
            /*query: {  
                key: 'key',   
                msgKey: this.msg  
            }*/  
        })

接受方式

this.$route.params.引數名
this.$route.query.引數名

實驗(包含兩種方式)：

傳遞頁：

 <router-link :to="{ name: 'readDetail', params: { msgKeyOne: 'jump test.' }}">
                <button type="button">跳轉</button>
              </router-link>
<button @click="sendParams">傳遞</button>
-----------------------------------------------------------------------------------------
export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },

接收頁：

<p class="container">
    <p style="color:red;">Num：{{ myIndex }}</p>
    <p>{{ msg }}</p>
  </p>
-----------------------------------------------------------
data () {
      return {
        msg: '',
        // 儲存傳遞過來的index
        myIndex: ''
      }
-----------------------------------------------------------
mounted: function () {
      this.msg = this.$route.params.msgKeyOne
      this.myIndex = this.$route.params.msgKey
      console.log(this.myIndex)
    }

實驗結果：