vue.js如何帶參數跳轉

vue.js帶參數跳轉的方法：先建立【readDetail.vue】且在【index.js】中註冊路由；然後透過【router-link】進行跳轉，或透過【$router 】方式跳轉。

本教學操作環境：windows10系統、vue2.5.2，本文適用於所有品牌的電腦。

【相關文章推薦：vue.js】

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

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

傳遞頁面方式：

1.透過router-link進行跳轉

<router-link   
    :to="{  
        path: &#39;yourPath&#39;,     
        params: {   
            key: &#39;value&#39;, // orderNum : this.searchData.orderNo
        },  
        query: {  
           key: &#39;value&#39;, // 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: &#39;readDetail&#39;, params: { msgKeyOne: &#39;jump test.&#39; }}">
                <button type="button">跳转</button>
              </router-link><button @click="sendParams">传递</button>-----------------------------------------------------------------------------------------export default {
    name: &#39;reads&#39;,
    data () {
      return {
        msg: &#39;msg test.&#39;
      }
    },

接收頁：

<div class="container">
    <p style="color:red;">Num：{{ myIndex }}</p>
    <p>{{ msg }}</p>
  </div>-----------------------------------------------------------data () {
      return {
        msg: &#39;&#39;,
        // 保存传递过来的index
        myIndex: &#39;&#39;
      }-----------------------------------------------------------mounted: function () {
      this.msg = this.$route.params.msgKeyOne      this.myIndex = this.$route.params.msgKey
      console.log(this.myIndex)
    }

####################################################相關免費學習推薦：###javascript###（影片）#######

以上是vue.js如何帶參數跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！