首頁 > web前端 > 前端問答 > vuejs中跳轉如何傳參

vuejs中跳轉如何傳參

青灯夜游
發布: 2023-01-11 09:22:12
原創
2846 人瀏覽過

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

vuejs中跳轉如何傳參

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

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

傳遞頁面方式:

1.透過router-link進行跳轉

<router-link>  
    <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>
                <button>跳转</button>
              </router-link>
<button>传递</button>
-----------------------------------------------------------------------------------------
export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },
登入後複製
接收頁:

<p>
    </p><p>Num:{{ myIndex }}</p>
    <p>{{ msg }}</p>
  
-----------------------------------------------------------
data () {
      return {
        msg: '',
        // 保存传递过来的index
        myIndex: ''
      }
-----------------------------------------------------------
mounted: function () {
      this.msg = this.$route.params.msgKeyOne
      this.myIndex = this.$route.params.msgKey
      console.log(this.myIndex)
    }
登入後複製
#實驗結果:

vuejs中跳轉如何傳參

相關推薦:《

vue.js教學

以上是vuejs中跳轉如何傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板