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 ->는 점프할 라우팅 경로이거나 라우팅 파일에 구성된 이름 값일 수 있으며 둘 다 가능합니다. Navigation

• params ->는 전송될 매개변수이며, 매개변수는 키 형식으로 직접 전달될 수 있습니다. value

• query -> 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!