vue.js帶參數跳轉的案例

小編給大家分享一下vue.js帶參數跳轉的案例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

vue.js帶參數跳轉的方法：首先創建【readDetail.vue】且在【index.js】中注冊路由；然后通過【router-link】進行跳轉，或者通過【$router】方式跳轉。

vue.js帶參數跳轉的方法：

首先創建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>

• path -> 是要跳轉的路由路徑,也可以是路由文件里面配置的 name 值,兩者都可以進行路由導航

• params -> 是要傳送的參數,參數可以直接key:value形式傳遞

• 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.'
      }
    },

接收頁：

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

看完了這篇文章，相信你對vue.js帶參數跳轉的案例有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！