Vue 프로젝트 에서 대역 도약 기능 실현

페이지 소개:
홈 페이지:name―>shishengzuotanhuichaxun

이 페이지 표 의 데 이 터 는 모두 인 터 페 이 스 를 통 해 백 엔 드 에서 배열 대상 을 가 져 오고 렌 더 링 합 니 다.모든 줄 의 데 이 터 는 해당 하 는 줄 id 가 있 습 니 다.우리 의 목적 은 표 의 모든 줄 데이터 의 줄 id 에 따라 해당 하 는 하위 상세 페이지 로 이동 하 는 것 입 니 다.
하위 페이지(상세 페이지):name―>Cinfo

이 페이지 는 줄 id 를 받 은 후 해당 인 터 페 이 스 를 통 해 렌 더 링 할 페이지 입 니 다.
프로젝트 소개 및 참조 점프 를 사용 하 는 이유:
이 시스템 은 Vue 를 사용 하여 프로젝트 프레임 워 크 를 구축 하고 Vant 모 바 일 프레임 워 크 의 구성 요소 라 이브 러 리 를 사용 하여 개발 합 니 다.홈 페이지 에 있 는 표 는 순수한 원생 html 의 th,tr,td 를 사용 하여 이 루어 졌 습 니 다.표 에 렌 더 링 데 이 터 를 vue 명령 v-for 로 tr 를 옮 겨 다 녔 기 때문에 렌 더 링 된 표 데이터 에 대응 하 는 모든 상세 한 단 추 는 같 습 니 다.점프 를 클릭 한 페이지 도 같 습 니 다.이것 은 프로젝트 업무 수요 에 어 긋 납 니 다.따라서 인삼 전달 의 실현 이 특히 관건 적 이다.인삼 전달 작업 의 원 리 는 같은 템 플 릿(Cinfo)을 사 용 했 지만 url 경로 가 다 르 기 때문에 각 하위 페이지 의 내용 은 서로 영향 을 주지 않 을 수 있다.
실현 과정:
​ step1：
vue-router 의 js 파일 에서 하위 상세 페이지 의 경 로 를 다음 으로 변경 합 니 다.

path 속성 에'/:id'를 추가 하고 name 속성 을 추가 합 니 다.점프 할 때 url 후 id 를 추가 하여 서로 다른 하위 상세 페이지 에 들 어 가 는 것 이 목적 입 니 다.
​ step2：
홈 페이지 에 자세 한 단 추 를 누 르 는 바 인 딩 이벤트 에 파 라 메 터 를 추가 합 니 다.v-for 에서 item,즉 인 터 페 이 스 를 통 해 받 은 배열 대상 을 클릭 이벤트 방법 중의 인삼 으로 합 니 다.

주의:
1.@click=detail(item),단 추 를 연결 하기 위해 이 벤트 를 눌 렀 을 때 item 은 괄호 에 item 인 자 를 추가 하 는 것 을 잊 지 마 세 요!
2.push()방법 에서 path 의 key 값 은 ES6 문법 C>템 플 릿 문자열 을 사 용 했 습 니 다.
이 때 상세 단 추 를 누 르 면 줄 id 를 매개 변수 로 하위 상세 페이지 에 전달 합 니 다.다음 그림:

​ step3：
다음은 하위 상세 페이지 에서 홈 페이지 에서 전 달 된 id 를 가 져 와 요청 매개 변수 로 인 터 페 이 스 를 호출 하고 데 이 터 를 렌 더 링 해 야 합 니 다.
전 달 된 id 가 져 오기 동작:

고정 표기 법,묻 지 마 세 요.물 어보 면 못 해 요.
이로써 우 리 는 삼 점프 기능 을 가 진 대부분의 조작 을 실 현 했 고 나머지 는 하위 페이지 에서 id 를 통 해 인 터 페 이 스 를 호출 하고 데 이 터 를 렌 더 링 하지 않 습 니 다.
요약:
방법 은 매우 많다.이 방법 은 현재 구체 적 인 매개 변 수 를 가지 고 점프 할 수 있 을 뿐 전체 배열 이나 대상 을 전달 할 수 없다.더 좋 은 방법 이 있다 면 공유 해 보 세 요.파 라 메 트릭 점프 의 전체적인 실현 절 차 는 어렵 지 않 고 주로 사고 이다.이 공 유 는 본인 의 실력 부족 으로 정확 하고 상세 하지 않 을 수 있 습 니 다.모든 절차 에서 잘못 묘사 되 거나 부적 절하 거나 모호 한 부분 이 있 으 면 여러분 께 서 제 잘못 을 지적 해 주 십시오~대단히 감사합니다!모두 함께 노력 하고 함께 진보 합 시다!
Vue 프로젝트 에서 참여 점프 기능 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 참여 점프 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!