vue-router에서 전달되는 쿼리 동적 매개변수 문제 해결

이제 vue-router의 쿼리 동적 매개변수 전달 문제를 해결하기 위한 기사를 공유하겠습니다. 이는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

저는 최근에 프로젝트를 작성하고 있는데, 프로젝트를 작성하는 과정에서 항상 이런저런 문제를 발견합니다. 예를 들어, 우여곡절 끝에 vue-router의 쿼리가 어떻게 동적 매개변수를 전달합니까? 문제는 다음과 같이 설명됩니다.

점프할 때 URL이 다음과 같았으면 좋겠습니다: http://localhost:8080/editmovie?id=****

<li><router-link :to="{path:&#39;editmovie&#39;, query: {id : 111}}" class="edit">修改</router-link></li>

그런데 뭐? 위는 정적일 뿐이며 URL은 항상 다음과 같습니다. http://localhost:8080/editmovie?id=111

실제로 필요한 ID는 숨겨진 요소에 배치됩니다.

<li class="hiden">2016987</li>

처음에는 구성 요소에서 메서드를 호출하는 것이었는데 여러 번 시도했지만 실패했습니다. 그러다 우연히 Q&A

vue-router가 들어오는 매개 변수를 동적으로 구성하는 것을 보았습니다. :

<li v-for=" el in hotLins" >
 <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">
  <img :src="el.image_list[0]">
  <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
  <p>{{el.address}}</p>
 </router-link>
</li>

문득 아이디어가 떠올랐습니다. 해결 방법은 다음과 같습니다.

데이터의 ID를 li의 ID에 바인딩한 다음 쿼리에 작성하세요. 바인딩을 입력하세요

<li v-bind:id="id"><router-link :to="{path:&#39;editmovie&#39;, query: {id : id}}" class="edit">修改</router-link></li>

export default {
 name : 'Movie',
 data() {
 return {
  id : ""
 }
 },
 methods: {
 getId () {
  var id = $('.hiden').eq(0).text();
  console.log(id);
 }
 },
 mounted() {
 this.id = $('.hiden').eq(0).text();
 },
 components : {
 Heade,
 Foot
 }
}

그러면 URL은 http://localhost:8080/editmovie?id=2016987과 같이 되며 문제가 해결됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

바이너리 바이트 스트림 데이터를 보내고 받는 Ajax 방법

Ajax 기술을 마법처럼 사용하여 제품 수량 및 총 가격 예제 코드를 부분적으로 새로 고침

Ajax 액세스에 대한 완벽한 솔루션 세션 실패 질문이 발생할 때

위 내용은 vue-router에서 전달되는 쿼리 동적 매개변수 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!