vuejs에서 페이지 점프를 구현하는 방법

페이지 점프를 구현하는 Vuejs 방법: 1. "..." 문을 사용합니다. 2. "this.$router. push({경로: '페이지 URL 주소' })" 문.

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

페이지 점프를 구현하기 위한 Vue 라우팅의 두 가지 방법(라우터 링크 및 JS)

1. 을 통해

구성 요소를 사용합니다. 다른 HTML 콘텐츠로 전환하기 위한 탐색 링크

사용법:

• 간단한 작성 방법

<router-link to="demo2">demo2</router-link>

• v-bind 작성 방법 사용

<router-link :to="&#39;demo2&#39;">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: &#39;demo2&#39; }">demo2</router-link>

• 작성 방법

rreee

여기에 매개변수를 전달하려면 router.js에서 데모2의 경로를 구성해야 합니다. 경로에서 데모2 뒤에 다음과 같이 와일드카드 문자:와 해당 userId를 추가합니다. 구성이 완료되면 페이지 점프 결과는

/demo2/123

여기의 "123"은 userId

입니다. 새 페이지에서 전달된 매개변수 userId를 어떻게 가져오나요?

다음과 같이 mounted 후크에서

this.$route.params.xx

를 사용합니다.

<router-link :to="{ name: &#39;demo2&#39;, params: { userId: 123 }}">demo2</router-link>

주소 키-값 쌍을 입력

• {
    path: '/demo2/:userId',
    name: 'demo2',
    component: demo2
    },

Page Jump 전송 결과는

/demo2?plan=private

입니다. (router.js에서는 경로를 구성할 필요가 없습니다.)

새 페이지에서 전달된 주소 키-값 쌍 계획을 가져옵니다. , mounted에 있을 수 있습니다. 후크에서

this.$route.plan.xx

를 사용하여 다음과 같이 전달된 주소 키-값 쌍을 얻습니다.

mounted () {
    alert(this.$route.params.userId)
}
// 弹出123

2 JS를 통해 구현됩니다. $ ROUTER.PUSH ()

테em 플레이트 부분 :

<router-link :to="{ path: &#39;demo2&#39;, query: { plan: &#39;private&#39; }}">demo2</router-link>

script Part :

(여기에 참고 라우터, 위의 경로) 매개변수 쓰기

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

• 들어오는 주소 키-값 쌍

<button @click="toURL">跳转页面</button>

관련 권장사항: "

vue.js tutorial
• "

위 내용은 vuejs에서 페이지 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!