Nuxt 의 경로 설정 과 매개 변수 전달 방식

6356 단어 Nuxt경로배치 하 다.매개 변수
학습 전단 구 조 는 모두 경로 체 제 를 배 워 야 한다.경로 가 우리 의 업무 논 리 를 나타 내 고 모듈 을 연결 시 켜 프로그램 을 빛나 게 할 수 있 기 때문이다.
쉽게 말 하면 길 은 우리 의 도약 체제 이 고 링크 도약 으로 간단하게 이해 할 수 있다.
Nuxt.js 의 길 은 복잡 하지 않 습 니 다.이것 은 우리 에 게 포장 을 해 주 었 고 많은 설정 절 차 를 절약 할 수 있 습 니 다.
단순 경로 데모
우 리 는 현재 루트 디 렉 터 리 의 pages 파일 아래 두 개의 폴 더 를 새로 만 들 었 습 니 다.about 와 news(우리 와 뉴스 에 관 한 기능 모듈 모방)
about 폴 더 아래 에 index.vue 파일 을 새로 만 듭 니 다.코드 는 다음 과 같 습 니 다.

<template>
 <div>
  <h2>About Index page</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>
뉴스 폴 더 에 index.vue 파일 을 새로 만 듭 니 다.코드 는 다음 과 같 습 니 다.

<template>
 <div>
  <h2>News Index page</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>
원래 pages 폴 더 의 index.vue 를 수정 하고 쓸모없는 코드 를 삭제 하 며 아래 링크 코드 를 기록 합 니 다.

<template>
 <div>
 <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >HOME</a></li>
  <li><a href="/about" rel="external nofollow" >ABOUT</a></li>
  <li><a href="/news" rel="external nofollow" >NEWS</a></li>
 </ul>
 </div>
</template>

<script>
export default {
 comments:{}
}
</script>

<style lang="less" scoped>

</style>
결 과 는 다음 과 같다.

태그
위의 예 는 점프 에 성 공 했 지만,Nuxt.js 는 이 중탭 의 방법 을 추천 하지 않 습 니 다.이것 은 우 리 를 위해탭(vue 에서 구성 요소 라 고 함)을 준 비 했 습 니 다.우리라벨 을로 바 꿉 니 다.about 폴 더 아래 새 index.vue <template> <div> <h2>About Index page</h2> <ul> <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li> </ul> </div> </template>뉴스 폴 더 아래 새 index.vue <template> <div> <h2>News Index page</h2> <ul> <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li> </ul> </div> </template>pages 폴 더 의 index.vue <template> <div> <ul> <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li> <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li> <li><nuxt-link :to="{name:'news'}">NEWS</nuxt-link></li> </ul> </div> </template> <script> export default { } </script> <style> </style> params 전달 매개 변수경로 가 항상 파 라 메 터 를 전달 해 야 합 니 다.우 리 는 파 라 메 터 를 간단하게 사용 하여 전달 할 수 있 습 니 다.우 리 는 지금 뉴스 페이지(news)에 파 라 메 터 를 전달 한 다음 에 뉴스 페이지 에서 간단 한 수신 을 할 수 있 습 니 다.우 리 는 먼저 pages 아래 의 Index.vue 파일 을 수정 하여 뉴스의 점프 에 params 인 자 를 추가 하여 3306 ID 를 전달 합 니 다. <template> <div> <ul> <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li> <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li> <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li> </ul> </div> </template> <script> export default { components: { } } </script> <style> </style>뉴스 폴 더 의 index.vue 에서$route.params.newsId 로 받 습 니 다.코드 는 다음 과 같 습 니 다. <template> <div> <h2>News Index page</h2> <p>NewsID:{{$route.params.newsId}}</p> <ul> <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li> </ul> </div> </template> 보충 지식:nuxt 경로 의 params 와 query경로 정의루트 테이블,설 정 된 전체 항목 에 접근 할 수 있 는 모든 루트 정보모든 경로 에 name 속성 을 추가 하고 페이지 가 이동 할 때 사용 하 는 것 을 권장 합 니 다.권장 name 중복 불가 const router=new VueRouter({ routes:[ { path:'/detail',//경 로 를 표시 하고 url 주소 표시 줄 에 입력 한 내용 을 표시 합 니 다. component:홈,//이 주소 에 접근 할 때 어떤 구성 요 소 를 표시 합 니까? 이름:'H',//이름 } ] })경로 이동1.router-link to 속성 설정 점프 정보to 문자열 을 직접 설정 할 수 있 습 니 다.to 대상 과 함께 할 수 있 습 니 다.이 방법 을 사용 하 는 것 을 권장 합 니 다.점프 할 때 name 을 사용 하 는 것 을 권장 합 니 다.2.프로 그래 밍 점프$router.push경로 참조1.query 는 매개 변 수 를 url 뒤에 전달 하고 매개 변 수 는 url 주소 표시 줄 뒤에 직접 연결 하여 사용 합 니까?분할,여러 매개 변수 용&분할사용$route.query 가 져 오기2.params 는 routes 가 정의 할 때':매개 변수 이름'형식 으로 자리 잡 을 수 있 음 을 나타 낸다.여러 개의 파 라 메 터 를 전달 할 수 있 습 니 다.페이지 새로 고침 후 파 라 메 터 를 사용 할 수 있 도록 하려 면 routes 에서 설정 해 야 합 니 다.가 져 오기 사용$route.params(디 테 일 중점)페이지 새로 고침 이나 다른 작업 을 수행 한 후에 도 전달 하 는 인 자 를 유지 하려 면 경로 표(routes)에서 설정 하고':매개 변수 이름'형식 으로 자리 잡 아야 합 니 다.보충 하 다vue-router 구성 요 소 를 사용 한 후항목 에 두 개의 변 수 를 자동 으로 생 성 합 니 다$router$router $route 는 현재 페이지 의 경로 정 보 를 가 져 오 는 주소 query params 등 인 자 를 표시 합 니 다. $router 는 경로 대상 이 위 에서 경로 에 접근 할 수 있 는 점프 방법 을 표시 합 니 다. $route.params 에서 params 가 전달 하 는 인 자 를 가 져 옵 니 다. $route.query query 에서 query 가 전달 하 는 인 자 를 가 져 옵 니 다. //vue-router 학습 노트 기록 개발 의 사소한 것들 경로 전환 의 몇 가지 방식:1.성명 식:1)경로(/home/sort/detail)에 따라를 클릭 하여 하위 페이지 보기2)경로 이름(detail)에 따라하위 페이지 보기:to="를 누 르 면 바 인 딩 동적 경로 와 매개 변 수 를 실현 할 수 있 습 니 다.2.프로 그래 밍 방식:1） this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})2） this.$router.push({name: 'detail',params:{id: 'abc'}})비고:params 와 query 전 삼 의 차이:1.params 전송 시 매개 변 수 는 url 경로 에 나타 나 지 않 지만 페이지 를 새로 고 칠 때 param 안의 데 이 터 는 사라 집 니 다.2.query 전 참 시 매개 변 수 는 url 의 경로 에 나타 나 고 페이지 를 새로 고 칠 때 query 안의 데 이 터 는 변 하지 않 습 니 다.이상 의 Nuxt 의 경로 설정 과 매개 변수 전달 방식 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
몇 가지 해커 도구 의 사용 방법
셸 의 배열 작업 소결 과 거품 정렬 은 스 크 립 트 공 유 를 실현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage