vuejs에서 점프할 때 매개변수를 전달하는 방법

Vue 매개변수 점프 방법: 1. 라우터 링크 태그의 params 또는 쿼리 속성을 통해 매개변수를 점프합니다. 2. "this.$router.push({name:'Route naming',params:{ 매개변수 이름: 매개변수 값..}})" 명령문을 사용하여 매개변수 전송으로 점프합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

먼저 readDetail.vue를 생성하고 index.js에 경로를 등록하세요.

페이지 전달 방법:

1. 라우터 링크를 통해 점프

<router-link>  
    <button>跳转</button> 
</router-link> 

 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航  
 2. params -> 是要传送的参数,参数可以直接key:value形式传递  
 3. query -> 是通过 url 来传递参数的同样是key:value形式传递

2. $router를 통해 점프

this.$router.push({name:'Route naming',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.매개변수 이름

실험(2가지 방법 포함) :

전송 페이지:

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

실험 결과:

관련 추천: "vue.js Tutorial"

위 내용은 vuejs에서 점프할 때 매개변수를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!