vue에서router-link와 전통적인 a 링크의 차이에 대해 상세히 말하다
2927 단어 vuerouter-linka 링크
공식적인 해석은 다음과 같다.
HTML5history모드든 Hash모드든 표현 행위가 일치하기 때문에 루트모드를 전환하거나 IE9에서 Hash모드를 사용하려면 변동이 없습니다.
HTML5history 모드에서router-link는 클릭 이벤트를 지키고 브라우저가 페이지를 다시 불러오지 않도록 합니다.
HTML5history 모드에서base 옵션을 사용하면 모든 to 속성을 쓸 필요가 없습니다. (기본 경로)
으으으, 블로거가 처음 배웠을 때 못 알아봤다고 할 수 밖에 없어. (이전의 기초 지식이 튼튼하지 않았겠지. 나중에 보충해야 할 것 같아.) 그래서 스스로 찾아봤어.
W3C에서는 다음과 같이 a 레이블을 설명합니다.탭은 하이퍼링크를 정의합니다. 한 페이지에서 다른 페이지로 링크하는 데 사용됩니다.한 페이지에서 다른 페이지로 이동하지만, 여기서는 다중 보기의 한 페이지 웹 응용이라는 개념에 위배된다a탭을 통해 점프하면 페이지가 다시 렌더링됩니다. 즉, 새로운 페이지를 다시 여는 것과 같습니다. 시각적으로'깜박임'으로 나타납니다(로컬 프로젝트라면 기본적으로 볼 수 없습니다).router-link 구성 요소는 사용자가 루트 기능을 가진 응용 프로그램에서 내비게이션을 지원합니다.to 속성을 통해 대상 주소를 지정하면 기본적으로 올바른 링크가 있는탭으로 렌더링됩니다. tag 속성을 설정하여 다른 탭을 생성할 수 있습니다.router-link를 통해 점프를 하면 새 페이지로 이동하거나 다시 렌더링하지 않습니다. 루트가 가리키는 구성 요소를 선택하여 렌더링을 합니다. 반복적으로 렌더링하는'무사용'을 피할 수 있습니다.요약:와 비교하면router-link 구성 요소는 불필요한 렌더링을 피하고 변화된 부분만 업데이트하여 DOM 성능 소모를 줄인다Vue의 혁신적인 점은 가상 DOM의 개념과 diff 알고리즘을 이용하여 페이지에 대한'수요에 따라 업데이트'를 실현했다는 것이다.Vue-router는 이 점을 잘 계승하고 있습니다. 다시 렌더링하는 것은 우리가 원하지 않는 것입니다. 왜냐하면 어느 페이지로 넘어가든지 한 번만 렌더링하면 충분하기 때문입니다. 구성 요소가 이 소망을 실현하는 데 도움을 주었다반대로라벨을 보면 매번 점프할 때마다 다시 한 번 과장해야 한다. 하나의 거대한 프로젝트에서 이것은 얼마나 무서운가!우리의 렌더링은 많은 "노용"을 하였으며, 매우 귀중한 DOM 성능을 소모하였습니다!보충 지식: vue 라우터-link에 a 라벨 포함 사용하기vue에서router-link를 사용하여 a 라벨을 포함할 때 a 라벨은routerlink의 값을 대체하여 점프합니다. <div class="list" v-for="(item,index) in listName" @click="toDetail(item.id)"> <p>{{item.name}}</p> <p>{{item.address}}</p> <p>{item.distance} 미터 </p> <a:href='getUrl(item.tel)'rel='external nofollow'rel='external nofollow'> 아이콘 {item.tel}</a> </div> <!--<router-link :to="{path:'detail',query:{id:item.id}}" tag="div" class="list" v-for="(item,index) in listName" @click="toDetail()"> <p>{{item.name}}</p> <p>{{item.address}}</p> <p>{item.distance} 미터 </p> <a:href='getUrl(item.tel)'rel='external nofollow'rel='external nofollow'> 아이콘 {item.tel}</a> </router-link>-->다음은 이 루트링크에서 a태그가 루트링크의 사용을 대체합니다.div 클릭 이벤트 사용 가능2 vue에서 ahref="tel:13254525"rel="external nofollow"를 실현할 때 직접:href="tel"rel="external nofollow"+변수를 사용하면 안 됩니다.함수 봉인 가능 getUrl(tel){ return "tel:"+tel; }, 이상의 이 상세한 이야기 vue중router-link와 전통적인 a링크의 차이점은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
