vue 업그레이드 의 길 vue-router 사용 튜 토리 얼

Vue 를 사용 하여 구 축 된 프로젝트 는 한 페이지 가 여러 구성 요소 로 구성 되 고 한 페이지 로 자주 응용 되 기 때문에 페이지 를 돌 릴 때 전통 적 인 href 는 시대 의 흐름 을 따라 가지 못 해 vue-router 가 생 겨 났 습 니 다.
vue-router 를 사용 할 때 이 의존 도 를 설 치 했 는 지 확인 해 야 합 니 다.없 으 면 사용 할 수 있 습 니 다npm install vue-router -S.하지만 현재 vue 프로젝트 를 구축 할 때 vue-router 를 설치 할 지 여 부 를 선택 할 수 있 습 니 다.주의 하 시 면 됩 니 다.
경로 설정
자동 으로 설 치 된 vue-router 는 src 폴 더 아래 에 router->index.js 파일 이 index.js 에서 routers 대상 을 만 들 고 필요 한 구성 요 소 를 도입 하여 경 로 를 설정 합 니 다.
 
만 든 routers 대상 에서 path 는 경로 의 경 로 를 설정 하고 component 는 매 핑 된 구성 요 소 를 설정 합 니 다.
그리고 main.js 에 router 파일 을 도입 합 니 다.
 
생 성 된 router 대상 에서 mode 를 설정 하지 않 으 면 기본 hash 모드 를 사용 합 니 다.이 모드 에 서 는 경 로 를\#로 포맷 합 니 다!서두
mode:'history'를 추가 하면 HTML 5 history 모드 를 사용 합 니 다.이 모드 에 서 는\#접두사 가 없 으 며 pushstate 와 replace State 를 사용 하여 기록 을 관리 할 수 있 습 니 다.
HTML 5 history 모드 에 대한 더 많은 내용 은 스스로 어머니 를 돌 볼 수 있 습 니 다.
2.포 함 된 경로
구 축 된 vue 인 스 턴 스 에서 프로젝트 의 등급 을 강화 하기 위해 App.vue 는 구성 요 소 를 저장 하 는 용기 일 뿐 입 니 다.
 
경로 가 바 뀌 면 내용 이 변 경 됩 니 다.
위 에 두 개의 경로 가 설정 되 어 있 습 니 다.http://localhost:8080또는http://localhost:8080/index를 열 었 을 때 index.vue 구성 요소 index.vue 는 진정한 부모 구성 요소 이 고 다른 하위 구성 요 소 는 index.vue 에 렌 더 링 됩 니 다.
 
1 급 경로 에서 2 급 경 로 를 구성 하려 면 router->index.js 를 수정 해 야 합 니 다.
 
설정 한 경로 뒤에 children 을 추가 하고 children 에 2 급 경 로 를 추가 하면 경로 가 포 함 됩 니 다.path 를 설정 할 때"/"로 시작 하 는 내장 경 로 는 루트 경로 로 간주 되 기 때문에 하위 경로 의 path 는"/"를 추가 할 필요 가 없 으 면 개인 적 인 요구 에 달 려 있 습 니 다.
3.맵 경로 사용
페이지 를 뛰 어 넘 기만 하면 검증 방법 을 추가 하지 않 아 도 네 비게 이 션 기능 을 수행 할 수 있 습 니 다.

<router-link class="item" to="/index/login" >{{ text }}</router-link>
 <router-link class="item" :to="{path:url, query:data}" >{{ text }}</router-link>

컴 파일 후 태그 로 렌 더 링 됩 니 다.to 는 href 로 렌 더 링 됩 니 다.클릭 하면 url 에 해당 하 는 변화 가 발생 합 니 다.
v-bind 명령 을 사용 하면 to 뒤에서 변 수 를 연결 할 수 있 습 니 다.v-for 명령 에 맞 춰 경로 메뉴 를 렌 더 링 할 수 있 습 니 다.
서로 다른 매개 변 수 를 입력 해 야 한다 면 경로 에 동적 인 파 라 메 터 를 추가 하여 to 에 대상 을 전송 할 수 있 습 니 다.

{
 path: item.url,
 query: { id: '007' }
}

그리고$ route.query.id를 사용 하여 해당 하 는 인 자 를 얻 을 수 있 습 니 다.
4.프로 그래 밍 식 네 비게 이 션
그러나 실제 항목 에 서 는 점프 를 실행 하기 전에 데 이 터 를 처리 하 는 링크 가 많 습 니 다.이 때 this.$router.push(location)를 사용 하여 url 을 수정 하여 점프 를 완성 할 수 있 습 니 다.

//   goLogin
<button class="login" @click="goLogin"></button>
//   goLogin
methods: {
    goLogin() {
      this.routes.push('/login')
    }
  },

push 뒤에 대상 일 수도 있 고 문자열 일 수도 있 습 니 다.

//    
this.$router.push('/index')
//   
this.$router.push({ path: '/index' })
//      
this.$router.push({ name: 'login', params: { userId: '123' }})