vue 페이지 를 뛰 어 넘 는 몇 가지 방법(추천)

vue 다른 페이지 를 뛰 어 넘 는 여러 가지 방법
1:router-link 점프

<!--      -->
<router-link to='/testDemo'>
 <button>    2</button>
</router-link>
 
<!--       -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
 <button>    1</button>
</router-link>
 
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
 <button>    3</button>
</router-link>

2：this.$router.push()

<template>
 <div id='test'>
 <button @click='goTo()'>    4</button>
 </div>
</template>
<script>
 export default{
 name:'test',
 methods:{
 goTo(){
 //    
 this.$router.push('/testDemo');
 
 //     
 this.$router.push({path:'/testDemo',query:{setid:123456}});
 this.$router.push({name:'testDemo',params:{setid:111222}});
 }
 }
 }
</script>

params 와 query 전송 매개 변 수 는 무엇이 다 릅 니까?주소 표시 줄 에서 볼 수 있 습 니 다.params 가 매개 변 수 를 전달 할 때 주소 표시 줄 에 매개 변수 내용 이 보이 지 않 습 니 다.ajax 의 post 전송 참조,query 전송 매개 변수 일 때 주소 표시 줄 에 전 달 된 매개 변수 정 보 를 볼 수 있 습 니 다.ajax 의 개체 전송 참조 와 같 습 니 다.
setId 매개 변 수 를 단독으로 전송 할 때 주소 표시 줄 의 주 소 는 다음 그림 과 같 습 니 다.
 
    첫 번 째 방법:path-query 인삼

  두 번 째 방식:name-params 전송 매개 변수
그러나 일반적인 상황 에서 매개 변 수 는 하나의 대상 을 전달 하 는 것 이다.한 대상 을 전달 할 때 주소 표시 줄 의 주 소 는 다음 과 같다.
 
   첫 번 째 방법:path-query 인삼
 
  두 번 째 방식:name-params 전송 매개 변수
3:a 라벨 을 돌 릴 수 있 습 니까?외부 링크 를 뛰 어 넘 을 수 있 고 경로 가 뛰 어 넘 을 수 없습니다.<a href="https://www.baidu.com"><button> 5</button></a>수신 자 는 어떻게 인 자 를 받 습 니까?this.$route.query.serid this.$route.params.setid,다음은 받 은 예 를 들 어 보 겠 습 니 다.
인 자 를 받 을 때$route 이지$router 가 아 닙 니 다. 

<template>
 <div>
 testDemo{{this.$route.query.setid}}
 </div>
</template>

지식 포인트 보충:vue 세 가지 서로 다른 방식 으로 페이지 전환 실현
Vue：router-lin

 <router-link to="/">[     ]</router-link>
 <router-link to="/login">[  ]</router-link>
 <router-link to="/logout">[  ]</router-link>

this.$router.push("/");

<button @click="goHome">[     ]</button>
export default {
 name: "App",
 methods: {
 //       
 goHome() {
 this.$router.push("/");
 },
}

this.$router.go(1);

 <button @click="upPage">[   ]</button>
 <button @click="downPage">[   ]</button>
 upPage() {
 //       ，    history.back()
 this.$router.go(-1);
 },
 
 downPage() {
 //            ，    history.forward()
 this.$router.go(1);
 }

코드 예제:

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <router-view/>
 <router-link to="/">[     ]</router-link>
 <router-link to="/login">[  ]</router-link>
 <router-link to="/logout">[  ]</router-link>
 
 <!-- javascript     -->
 <button @click="goHome">[     ]</button>
 
 <!--       -->
 <button @click="upPage">[   ]</button>
 <button @click="downPage">[   ]</button>
 
 <!--       -->
 
 </div>
</template>
 
<script>
 export default {
 name: "App",
 methods: {
 //       
 goHome() {
 this.$router.push("/");
 },
 upPage() {
 //       ，    history.back()
 this.$router.go(-1);
 },
 downPage() {
 //            ，    history.forward()
 this.$router.go(1);
 }
 }
 };
</script>

총결산
vue 의 다양한 방법 으로 페이지 를 뛰 어 넘 는 몇 가지 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 뛰 어 넘 는 페이지 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 저 희 를 많이 사랑 해 주세요!