vue 의 동적 매개 변수 와 query 매개 변수 조작

Vue router 는 어떻게 전달 합 니까?
params,query 가 뭐 예요?
params:/router 1/:id,여기 id 는 params 라 고 합 니 다.예 를 들 어/router 1/123,/router 1/789
query：/router1?id=123,여기 id 는 query 라 고 합 니 다.예 를 들 면/router 1?id=456
query 방식 전송 및 수신 매개 변수
전 참:this.$router.push({path:'/xxx'query:{id:id}})this.$router.push 전 참 시 페이지 새로 고침 을 일 으 키 지 않 습 니 다.데 이 터 를 다시 요청 해 야 합 니 다.코드 는 다음 과 같 습 니 다.

<div>shopName:{{shop.shopName}}</div>
export default{
 data(){
  return {
   shop:{shopName:"shopName"},
   shopNo:"123"
  };
 },
 mounted(){
  //          
  this.loadShop();
 },
 watch:{
  // shopNo       
  shopNo:function(newShopNo){
   this.loadShop();
  }
 },
 methods:{
  loadShop(){
   //   API  shop  
   var shop = {/*      */};
   this.shop=shop;
  }
 }
}

수신 인자:this.$route.query.id
params 방식 전송 및 수신 매개 변수
params 전송 경로 인터페이스:router.js:경로 설정 이 여기에 있 습 니 다.params 방법 으로 인삼 을 전달 할 때 경로 뒤에 매개 변수 이름 을 추가 하고 인삼 을 전달 할 때 매개 변수 이름 은 경로 뒤에 설 치 된 매개 변수 이름과 대응 해 야 합 니 다.query 방법 을 사용 하면 이러한 제한 이 없 으 며,바로 점프 에서 사용 하면 됩 니 다.

전 참:this.$router.push({name:'xxx'params:{id:id}})
수신 매개 변수:this.$route.params.id
메모:경로 에 파 라 메 터 를 쓰 지 않 으 면 전달 할 수 있 지만 url 에 파 라 메 터 를 표시 하지 않 습 니 다.또한 다른 페이지 로 이동 하거나 페이지 를 새로 고 칠 때 파 라 메 터 를 잃 어 버 립 니 다(아래 그림 참조).이 매개 변수 에 의존 하 는 http 요청 이나 다른 작업 이 실 패 됩 니 다.
query 전 삼 과 params 전 삼 의 차이
용법:query 는 path 로 도입 해 야 합 니 다.params 는 name 으로 도입 해 야 합 니 다.수신 인 자 는 모두 this.$route.query.name 과 this.$route.params.name 입 니 다.name 입 니 다.인 자 를 받 을 때$router 가 아 닌$router 입 니 다!!
보 여 주 는:query 는 우리 ajax 에서 get 전송 과 유사 합 니 다.params 는 post 와 유사 합 니 다.좀 더 간단하게 말 하면 전 자 는 브 라 우 저 주소 표시 줄 에 파 라 메 터 를 표시 하고 후 자 는 표시 되 지 않 기 때문에 둘 다 동시에 사용 할 수 없습니다!!
router-link 와 프로 그래 밍 식 네 비게 이 션 두 가지 점프 방식
router-link 를 통 해 우 리 는 경로 가 있 는 구성 요소 에 인 자 를 전달 할 수 있 습 니 다.이것 은 우리 가 실제 사용 할 때 매우 중요 합 니 다.
프로 그래 밍 식 내 비게 이 션

router.push
router.replace 는 router.push()와 달리 router.replace()를 사용 하면 방문 기록 push 를 url 에 넣 기 때문에 되 돌 릴 때 반드시 이곳 으로 돌아 갑 니 다.router.replace()는 새로운 진입 을 추가 하 는 것 이 아니 라 스 택 정상 요 소 를 교체 합 니 다.그러면 돌아 올 때 스 택 정상 요소 의 다음 으로 돌아 갑 니 다.
router.go
브 라 우 저 기록 에서 한 걸음 더 나 아가 history.forward()router.go(1)와 같 습 니 다.
한 단계 후퇴 기록 은 history.back()router.go(-1)와 같 습 니 다.
동적 전 삼 의 구덩이
메모:params 전송,push 안 에는 name:'xxxx'만 있 을 수 있 습 니 다.path:'/xxx'가 아 닙 니 다.params 는 name 으로 만 길 을 도입 할 수 있 기 때 문 입 니 다.path 라 고 쓰 여 있 으 면 수신 매개 변수 페이지 는 undefined!!
vue 세 가지 동적 전 삼 방식
다음 장면:

<el-table-column
  label="  ">
  <template slot-scope="scope">
   <el-button size="mini" type="primary" @click="goList(scope.row.id)">     </el-button>
  </template>
 </el-table-column>

직접 자리 표시 방식

goList(id){ 
 this.$router.push({path:`/line/${id}`}) 
}

다음 과 같은 경로 설정 이 필요 합 니 다.

  {
  path:'/line/:id',
  name:'line',
  component:line
  }

2.경로 속성 중의 name 을 통 해 일치 하 는 경 로 를 확인 하고 params 를 통 해 파 라 메 터 를 전달 합 니 다.

goList(id){ 
  this.$router.push({ name:"line",params:{ orderId:id }}) 
}

대응 경로 설정 은 다음 과 같 습 니 다.

 {
  path:'/line',
  name:'line',
  component:line
}

3.path 를 통 해 경로 와 일치 한 다음 에 query 를 통 해 파 라 메 터 를 전달 하고 전달 하 는 파 라 메 터 는 주소 표시 줄 에 노출 됩 니 다.

goList(id){ 
 this.$router.push({ path: '/line',query: { orderId:id }})
}

대응 경로 설정 동일 2
이상 vue 의 동적 전 참 과 query 전 참 작업 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.