vue跳轉(zhuǎn)傳參的方法：1、通過router-link標簽的params或query屬性進行跳轉(zhuǎn)傳參；2、通過“this.$router.push({name:'路由命名',params:{參數(shù)名:參數(shù)值..}})”語句進行跳轉(zhuǎn)傳參。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

首先創(chuàng)建readDetail.vue 且在index.js中注冊路由。

傳遞頁面方式：

1.通過router-link進行跳轉(zhuǎn)

<router-link        :to="{           path: 'yourPath',              params: {                key: 'value', // orderNum : this.searchData.orderNo         },           query: {              key: 'value', // orderNum : this.searchData.orderNo         }       }">       <button type="button">跳轉(zhuǎn)</button>  </router-link>    1. path -> 是要跳轉(zhuǎn)的路由路徑,也可以是路由文件里面配置的 name 值,兩者都可以進行路由導航    2. params -> 是要傳送的參數(shù),參數(shù)可以直接key:value形式傳遞    3. query -> 是通過 url 來傳遞參數(shù)的同樣是key:value形式傳遞

2. $router方式跳轉(zhuǎn)

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

 this.$router.push({               path: 'yourPath',                name: '要跳轉(zhuǎn)的路徑的 name,在 router 文件夾下的 index.js 文件內(nèi)找',               params: {                    key: 'key',                    msgKey: this.msg               }               /*query: {                   key: 'key',                    msgKey: this.msg               }*/           })

接受方式

• this.$route.params.參數(shù)名

• this.$route.query.參數(shù)名

實驗(包含兩種方式)：

傳遞頁：

 <router-link :to="{ name: 'readDetail', params: { msgKeyOne: 'jump test.' }}">                 <button type="button">跳轉(zhuǎn)</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: '',         // 保存?zhèn)鬟f過來的index         myIndex: ''       } ----------------------------------------------------------- mounted: function () {       this.msg = this.$route.params.msgKeyOne       this.myIndex = this.$route.params.msgKey       console.log(this.myIndex)     }

實驗結果：