vue-router 경로 와 페이지 간 네 비게 이 션 인 스 턴 스 분석

vue-router 는 Vue.js 공식 경로 플러그 인 으로 vue.js 와 깊이 있 게 통합 되 어 단일 페이지 응용 을 구축 하 는 데 적합 합 니 다.vue 의 단일 페이지 응용 은 루트 와 구성 요 소 를 기반 으로 하 며 루트 는 접근 경 로 를 설정 하고 경로 와 구성 요 소 를 비 추 는 데 사 용 됩 니 다.전통 적 인 페이지 응용 은 일부 하이퍼링크 로 페이지 전환 과 전환 을 실현 하 는 것 이다.vue-router 단일 페이지 응용 에 서 는 경로 간 전환,즉 구성 요소 전환 입 니 다.
vue-router
우 리 는 경로 가 일련의 방문 주소 규칙 을 정의 한 것 을 알 고 있 습 니 다.경로 엔진 은 이러한 규칙 에 따라 해당 하 는 처리 페이지 를 찾 은 다음 에 요청 을 페이지 에 전송 하여 처리 합 니 다.모든 백 엔 드 개발 은 이렇게 한다 고 할 수 있 지만 전단 로 는'요청'이 존재 하지 않 는 다.
전단 경 로 는 주소 가 일치 하 는 구성 요소 나 대상 을 찾 아 렌 더 링 합 니 다.브 라 우 저 주 소 를 바 꾸 어 서버 에 요청 하지 않 는 방법 은 두 가지 가 있 습 니 다.
첫째,주소 에\#를 추가 하여 브 라 우 저 를 속 이 는 것 입 니 다.주소 의 변 화 는 페이지 내 내 비게 이 션 을 하고 있 기 때 문 입 니 다.둘째,HTML 5 의 window.history 기능 을 사용 하여 URL 의 hash 를 사용 하여 완전한 URL 을 모 의 하 는 것 입 니 다.
vue-router 는 공식 적 으로 제공 하 는 전용 경로 도구 라 이브 러 리 입 니 다.vue 의 플러그 인 입 니 다.전역 참조 에서 vue.use()를 통 해 vue 인 스 턴 스 에 도입 해 야 합 니 다.

vue-cli 를 사용 하여 프로젝트 를 만 든 후(init 초기 화 시 vue-router 확인 y)
프로젝트 src 의 구 조 를 살 펴 보고 cmd 를 통 해 프로젝트 src 디 렉 터 리 에 들 어가 서 실행 tree -f > list.txt 구조 트 리 생 성(list.txt 에 저장):
구 조 는 다음 과 같다.

src
├─assets //     
│ └─image //   
│  
├─components //    
│ └─HelloWorld
│  HelloWorld.vue
│  
└─router //     
│ └─index.js
│ 
│ App.vue //       
│ main.js
│ 

1、main.js 열기:

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router, 
 render: h => h(App)　
})

10 번 째 줄 은 설정 한 경 로 를 vue 인 스 턴 스 에 연결 하고 11 번 째 줄 은 vue 인 스 턴 스 에서 render 방법 으로 vue 구성 요소(App)를 초기 화 합 니 다.
Render 는 vue 2 에 추 가 된 특색 있 는 방법 으로 더 좋 은 운행 속 도 를 얻 기 위해 vue 2 도 react 와 유사 한 Virtual Dom(가상 Dom)을 사용 합 니 다.
 2.그리고 우 리 는 components 에 몇 개의 구성 요 소 를 등록 합 니 다.
3.router/index.js 설정 경로 열기

import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) //   router
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: MHeader //        
 },
 {
 path: '/rank',
 name: 'rank',
 component: Rank
 }
 ]
})

경로 의 패턴
키워드:"mode","history 모드","hash 모드","Abstract 모드"
매개 변수mode:history와 같은 라 우 터 에서 모드 를 사용 할 수 있 습 니 다.이 값 은history모드 를 사용 한 다 는 뜻 입 니 다.이 모드 는 history.pushstate API 를 충분히 이용 하여 URL 의 전환 을 완성 하고 페이지 를 다시 불 러 올 필요 가 없습니다.
history 모드 를 사용 하지 않 으 면 rank 에 접근 할 때 경로 가 다음 과 같 습 니 다.
http://localhost/#rank
반대로:
http://localhost/rank
이것 이 바로 history 모드 와 hash 모드 의 차이 입 니 다.그 밖 에 abstract 모드 도 있 습 니 다.

Hash:URL hash 값 을 경로 로 사용 합 니 다.

History:HTML 5 History API 와 서버 설정 에 의존

Abstract:node 서버 와 같은 모든 JavaScript 실행 환경 을 지원 합 니 다.브 라 우 저 없 는 API 를 발견 하면 이 모드 로 강제로 들 어 갑 니 다

경로 와 탐색
키워드:"router-link","router-view"
vue-router 는 이 네 비게 이 션 과 자동 렌 더 링 논 리 를 처리 하기 위해 두 개의 명령 탭 구성 요 소 를 제공 합 니 다.

―렌 더 링 경로 가 일치 하 는 구성 요소 보기

―사용자 가 경로 기능 을 가 진 응용 에서 내 비게 이 션 을 지원 합 니 다

우 리 는 두 개의 탭 구성 요 소 를 사용 하여 간단 한 페이지 레이아웃 을 완성 합 니 다.

루트 를 사용 할 때 루트 정 의 를 직접 인용 하지 않 는 다 는 원칙 을 명 확 히 해 야 한다.(즉,루트-link 에서 to='conpontents/rank/rank'을 통 해 루트 정 의 를 직접 인용 하지 않 는 다.)루트 정의 의 URL 이 변경 되면 모든 인용 부분 을 수정 해 야 한다.
router-link 에서 이름 참조 경로:to 속성 에 대상 표시 경로 의 이름 을 입력 합 니 다.

문자열 이 아 닌 v-bind 바 인 딩(약자:)을 사용 합 니 다.router-link 에 전달 해 야 하 는 대상{name:rank}입 니 다.
동적 경로
키워드:"동적 경로 파라미터","params","$router.params"
vue-router 는 매개 변 수 를 경로 정의 에 융합 시 켜 경로 의 일부분 이 되 었 습 니 다.우 리 는 이러한 매개 변 수 를'동적 경로 파라미터'라 고 부 릅 니 다.
매우 간단 합 니 다.매개 변수 이름 전에":"를 추가 한 다음 에 매개 변 수 를 경로 가 정의 하 는 path 에 씁 니 다.

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

1.이렇게 정 의 된 후에 vue-router 는 자동 으로/books/1,/books/2,.../books/n 형식의 경로 모델 과 일치 합 니 다.이렇게 정 의 된 경로 의 수량 이 확실 하지 않 기 때문에'동적 경로'라 고도 부 릅 니 다.
2.에서 우 리 는 params 의 속성 을 추가 하여 구체 적 인 매개 변수 값 을 지정 할 수 있 습 니 다.

 <router-link :to="{ name:'BookDetails'，params:{ id:1 } }">
  //...
 </router-link>

3.내 비게 이 션 이 도서 상세 페이지 에 들 어간 후에 우 리 는 속성 이 지정 한 매개 변수 값(즉,id 매개 변 수 를 다시 읽 는 것)을 가 져 와 야 할 수도 있 습 니 다.우 리 는$router.params 를 통 해 완성 할 수 있 습 니 다.

 export default {
 created () {
  const bookID = this.$router.params.id
 }
 }

내장 경로
키워드:"children",
우 리 는 아래 의 장면 을 이용 하여 첫 페이지/홈/독서 상세 페이지,독서 상세 도 우 리 는 아래 의 네 비게 이 션 구역 이 필요 하지 않다.그러나 우 리 는 이전의 경로 정 의 를 사용 하고 모든 페이지 는 사용 하고 싶 은 아래쪽 네 비게 이 션 바 를 가 져 야 한다.앞의 경로 구조 에 따라 도서 상세 페이지 로 안내 할 수 없다.다음 과 같다.

그래서 우 리 는 길 을 정의 하 는 다른 방식 으로 앞의 길 을 조정 해 야 한다.
플러그 인 루트 는 하위 루트 라 고도 부른다.루트 를 하위 보기에 표시 하려 면 상응하는 하위 루트 와 대응 해 야 한다.루트 정의 에서 children 수조 속성 을 사용 하면 하위 루트 를 정의 할 수 있다.

routers:[
 { 
  name:'Main',
  path:'/',
  component:Main,
  children:[
  { name:'Home',path:'home',component:Home }
  { name:'Me',path:'me',component:Me }
  ] 
 },
 { name:'BookDetail',path:'/books/:id',component:BookDetail } 
]

주의해 야 할 것 은'/'로 시작 하 는 내장 경 로 는 루트 경로 로 간주 되 므 로 하위 경로 에'/'를 추가 하지 마 십시오.
경로 와 별명 을 바 꿉 니 다.
키워드:"redirect","alias"
방향 을 바 꾸 는 것 도 routes 설정 을 통 해 이 루어 집 니 다.다음 예 는/a 에서/b 로 바 꾸 는 것 입 니 다.

 routes: [
 { path: '/a', redirect: '/b' }
 ]
//                  
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

또한 리 셋 과 별명 을 구별 해 야 합 니 다.'리 셋'은 사용자 가/a 에 접근 할 때 URL 이/b 로 바 뀌 고 경로 가/b 와 일치 한 다 는 뜻 입 니 다.그러면'별명'은 무엇 입 니까?
/a 의 별명 은/b 입 니 다.사용자 가/b 에 접근 할 때 URL 은/b 로 유지 되 지만 경로 가 일치 하면/a 입 니 다.사용자 가/a 에 접근 하 는 것 과 같 습 니 다.
alias 를 이용 하여 경로 에 별명 을 설정 합 니 다.

 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]

총결산
여기까지 vue 경로 의 기 초 를 우 리 는 이미 정 리 했 습 니 다.우 리 는 실전 에서 계속 연습 하고 문 제 를 많이 해결 해 야 경로 로 우 리 를 도와 임 무 를 완성 하 는 동시에 vue 가 진급 하 는 경로 지식 에 기반 을 다 질 수 있 습 니 다.