Vue-Router에서 쿼리의 동적 매개변수 전달을 구현하는 방법

이번에는 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>

그런데 뭐죠? ? 위의 내용은 static이며 URL은 항상 다음과 같습니다. http://localhost:8080/editmovie?id=111

실제로 필요한 ID는 숨겨진 요소에 있습니다.

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

처음에는 컴포넌트에 있는 메소드를 호출하자는 생각이었는데, 여러번 시도하다가 실패하다가 우연히 질문과 답변을 봤습니다

vue-router동적 구성인입 매개변수 문제, 그러다가 다음과 같은 내용을 봤습니다. code:

<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>

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

li의 ID를 데이터의 ID에 바인딩한 다음 쿼리에 바인딩된 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
 }
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS를 사용하여 컴퓨터 구성 감지(코드 포함)

eslint 검증을 켜고 끄도록 vue 프로젝트를 사용자 정의하는 방법

위 내용은 Vue-Router에서 쿼리의 동적 매개변수 전달을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!