這篇文章將為大家詳細(xì)講解有關(guān)vuejs中怎么實現(xiàn)跳轉(zhuǎn)傳參，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計與策劃設(shè)計,新城網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:新城等地區(qū)。新城做網(wǎng)站價格咨詢:18980820575

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

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

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

傳遞頁面方式：

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

  
    跳轉(zhuǎn) 
 

 1. path -> 是要跳轉(zhuǎn)的路由路徑,也可以是路由文件里面配置的 name 值,兩者都可以進(jìn)行路由導(dǎo)航  
 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ù)名

實驗(包含兩種方式)：

傳遞頁：

 
                跳轉(zhuǎn)
              
傳遞
-----------------------------------------------------------------------------------------
export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },

接收頁：

    Num：{{ myIndex }}

    
{{ msg }}
  

-----------------------------------------------------------
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)
    }

關(guān)于“vuejs中怎么實現(xiàn)跳轉(zhuǎn)傳參”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。