6.vue-router

라우팅 인식

라우팅

위키백과: 루트(routing)는 인터넷을 통해 정보를 원본 주소에서 목적 주소로 전송하는 활동이다.라우팅은 패킷이 에서 까지의 경로를 결정합니다.입력단의 데이터를 적당한 출력단으로 전송합니다.루트 중에는 매우 중요한 개념을 루트표라고 한다.루트 테이블은 본질적으로 하나의 맵으로 데이터 패키지의 방향을 결정한다.

백엔드 라우팅 단계

백엔드 라우팅 개념

초기 웹 사이트 개발의 전체 HTML 페이지는 서버가 렌더링했습니다.서버는 클라이언트에게 렌더링된 HTML 페이지를 직접 되돌려줍니다.그러나 한 사이트에서 이렇게 많은 페이지 서버를 어떻게 처리합니까?한 페이지에 해당하는 사이트 주소가 있습니다 URL.URL는 서버에 전송되고 서버는 정규를 통해 이 URL 를 일치하며 마지막으로 한 Controller 에게 처리됩니다.Controller 각종 처리를 하여 최종적으로 HTML 또는 데이터를 생성하여 전단으로 되돌려준다.이것은 IO 조작을 완성했다.이런 조작은 바로 백엔드 루트이다.

백엔드 라우팅의 이점:

우리 페이지에서 서로 다른 경로 내용을 요청할 때, 서버에 맡겨서 처리하고, 서버는 전체 페이지를 렌더링하고, 페이지를 클라이언트에게 되돌려줍니다.이런 상황에서 좋은 페이지를 렌더링하면 js와 css를 단독으로 불러올 필요가 없고 브라우저에 직접 보여줄 수 있어 SEO의 최적화에 도움이 된다.

백엔드 라우팅의 단점:

한 가지 상황은 전체 페이지의 모듈을 백엔드 인원이 작성하고 유지하는 것이다.또 다른 상황은 전방 개발자가 페이지를 개발하려면 PHP와 자바 등 언어를 통해 페이지 코드를 작성해야 한다는 것이다.그리고 통상적으로 HTML 코드와 데이터, 그리고 대응하는 논리가 혼합되어 작성과 유지보수는 매우 나쁜 일이다.

프런트엔드 라우팅 단계

앞뒤 끝 분리 단계:

Ajax의 출현에 따라 전후단이 분리된 개발 모델이 생겼다.백엔드는 API 만 데이터를 되돌려주고, 백엔드는 Ajax 를 통해 데이터를 가져오며, JavaScript 을 통해 데이터를 페이지에 렌더링할 수 있습니다.이렇게 하면 가장 큰 장점은 앞뒤의 책임이 명확하고 뒷부분은 데이터에 집중하며 앞부분은 상호작용과 시각화에 전념하는 것이다.또한 이동단(iOS/Android)이 나타나면 백엔드는 아무런 처리도 하지 않고 이전의 API를 사용하면 된다.현재 많은 사이트들이 여전히 이런 모델을 채택하여 개발하고 있다.

단일 페이지 적용 단계:

SPA 페이지: 단일 페이지를 복용하고 html 페이지가 하나밖에 없습니다. 이후에 루트 관계를 유지합니다.가장 주요한 특징은 앞뒤가 분리된 기초 위에 전단 루트를 덧붙인 것이다.즉, 프런트엔드에서 루트 규칙을 유지하는 것이다.프런트엔드 라우팅의 핵심: URL을 변경하지만 전체 페이지를 새로 고치지 않습니다.URL이 변화할 때 서버에서 다운로드한 자원에서 해당하는 js 코드를 추출하여 전체 페이지를 새로 고치지 않습니다.

프런트엔드 라우팅 규칙

URL을 변경하는 방법은 있지만 페이지는 전체적으로 새로 고침되지 않습니다.
URL의 hash
URL의hash는 바로 닻점(#)이며 본질적으로 window.location의 속성을 바꾸는 것이다.우리는 직접 할당 href 을 통해 location.hash 을 변경할 수 있지만, 페이지는 새로 고침되지 않습니다.
HTML5의 history 모드
History 인터페이스는 HTML5에 추가된 것으로 페이지를 새로 고치지 않고 URL을 바꾸는 다섯 가지 모드가 있습니다.

history.pushState()

history.replaceState()

history.go()

href등가history.back()history.go(-1)등가history.forward()이 세 인터페이스는 브라우저 인터페이스의 전진 후퇴와 같다.

vue-router 기본 사용

vue-router는 Vue입니다.js 공식 루트 플러그인, 그것과 vue.js는 깊이 있게 통합되어 단일 페이지 구축에 적합합니다.vue-router는 루트와 구성 요소를 기반으로 합니다.라우팅은 액세스 경로를 설정하고 경로와 구성 요소를 매핑하는 데 사용됩니다.vue-router의 단일 페이지 응용 프로그램에서 페이지의 경로 변경은 구성 요소의 전환입니다.

설치 및 사용

1단계: vue-router 설치

npm install vue-router --save

단계 2: 모듈식 프로젝트에서 사용 (플러그인이므로 Vue.use () 를 통해 라우팅 기능을 설치할 수 있음) 첫 번째 단계: 라우팅 객체를 가져오고 Vue를 호출합니다.use(VueRouter) 2단계: 라우팅 인스턴스 작성 및 라우팅 맵 프로비저닝 3단계: Vue 인스턴스에서 생성된 라우팅 인스턴스 마운트
router --> index,js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Vue.use( ),  
Vue.use(VueRouter)

// 2. 
const routes = [];
const router = new VueRouter({
  //  
  routes,
})

// 3. router Vue 
export default router

Vue 인스턴스에 마운트

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router, // 
  render: h => h(App)
})

vue-router를 사용하려면

1단계: 라우팅 구성 요소 만들기 2단계: 라우팅 매핑 구성: 구성 요소 및 경로 매핑 관계 3단계: 라우팅 사용: 통과 및history.go(1): 이 레이블은 에 이미 내장된 구성 요소로 레이블로 렌더링됩니다.vue-router: 레이블이 기준으로 하는 구성 요소입니다.현재의 경로는 서로 다른 웹 페이지의 다른 내용을 동적으로 과장한다. 예를 들어 맨 위의 제목/네비게이션, 또는 밑에 있는 일부 판권 정보 등은 같은 등급에 있을 것이다.라우팅 전환 시 마운트된 구성 요소는 로 전환되며 다른 내용은 변경되지 않습니다.
의 속성:: 점프 경로를 지정할 수 있습니다.**to**: 나중에 렌더링할 구성 요소를 지정할 수 있습니다.

// 
 ,  

**tag**: 리플레이스는history 기록을 남기지 않습니다.replace를 지정한 경우, 후퇴 키는 이전 페이지로 돌아갈 수 없습니다.**replace**: 대응하는 루트가 일치하면 현재 요소에 **active-class**의class를 자동으로 설정합니다. 설정router-link-active은 기본 이름을 수정할 수 있습니다.루트 실례를 만들 때 추가할 수도 있습니다 active-class.강조 표시된 내비게이션 메뉴나 밑에 있는 tabbar를 할 때 이 종류를 사용합니다.그러나 클래스의 속성을 수정하지 않고 기본router-link-active를 사용하면 됩니다. 

const router = new VueRouter({
  routes,
  linkActiveClass: 'active'
})

router-->index.js

 :  
const routes = [
  {
    path: '/home',
    component: Home,
  },
  {
    path: '/about',
    component: About,
  },
]

App.vue

기타 문제

라우팅 코드 점프

페이지의 점프는 대응하는 자바스크립트 코드를 실행해야 할 수도 있습니다. 이 때 두 번째 점프 방식을 사용할 수 있습니다.

 export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    userClick() {
      this.$router.push('/user/' + this.userId)
    },
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          height: 1.87
        }
      })
    }
  }
} 

주의: linkActiveClass: 'active' 직접 vue-router 방법으로 경로를 바꾸지 마세요.history 기본적으로 모든 구성 요소에 Vue-router 이 대상을 추가합니다.이 대상은 이전에 new에서 나온 라우터의 실례입니다.

라우팅의 기본 경로

$router 은 리디렉션입니다.

const routes = [
  {
    path: '',
    // redirect 
    redirect: '/home'
  },
]

Histoty 모드

기본적으로 경로 변경에 사용된 URL의 경우redirect.HTML5의 hash 모드를 사용하려면 다음과 같이 구성합니다.

const router = new VueRouter({
  routes,
  mode: 'history',
})

동적 라우팅history 이 대상은 이전 뉴에서 나온 라우터의 실례입니다.this.$router 이 대상은 현재 활발한 경로이다.

//
 
//
{
    path: '/user/:userId',
    component: User,
}
//
 
{{$route.params.id}}
 

라우팅 게으름

패키지가 응용 프로그램을 구축할 때 Javascript 패키지는 매우 커서 페이지 불러오는 데 영향을 줍니다.만약 서로 다른 루트가 대응하는 구성 요소를 서로 다른 코드 블록으로 분할한 후에 루트가 접근할 때 대응하는 구성 요소를 불러올 수 있다면 더욱 효율적일 것이다.루트 게으름의 주요 역할은 루트에 대응하는 구성 요소를 하나하나의 js 코드 블록으로 포장하는 것이다.이 루트가 접근할 때만 대응하는 구성 요소를 불러옵니다.게으른 로드 방식

const Home = () => import('../components/Home.vue')

vue-router 플러그인 경로

중첩 라우팅을 수행하려면 다음 두 단계가 있습니다.

해당 서브어셈블리를 생성하고 라우팅 맵에서 해당 서브라우트를 구성합니다.

어셈블리 내부에 레이블을 사용합니다.

router-->index.js

const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: ' '
    },
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
  }
]
const router = new VueRouter({
  routes,
  mode: 'history',
})

// 3. router Vue 
export default router

Home.vue

vue-router 매개 변수 전달

매개 변수를 전달하는 방식

전달 매개 변수는 주로 두 가지 유형이 있는데 this.$route과params이다.
params 유형:
루트 형식 설정:/router/: id 전달 방식: path 뒤에 대응하는 값을 따라 전달된 경로:/router/123,/router/abc
query 유형:
루트 형식 설정:/router, 즉 일반 설정 전달 방식: 대상에서query의 키를 전달 방식으로 사용한 후 형성된 경로:/router?id=123,/router?id=abc 사용 방식도 두 가지가 있다. query 방식과 코드 방식

JavaScript방식

코드 방식

매개변수 가져오기

매개변수는 JavaScript 객체를 통해 가져옵니다.사용된 응용 프로그램에서는 라우팅 객체가 각 구성 요소에 주입되고 값$route이 부여되며 라우팅이 전환되면 라우팅 객체가 업데이트됩니다.

루트와 루트와 루트의 차이

vue-router VueRouter 인스턴스이며 다른 URL로 이동하려면 $router를 사용합니다.push 방법this.$route은 현재router 점프 대상입니다.name,path,query,params 등을 얻을 수 있습니다

vue-router 내비게이션 수위

**$router**가 제공한 내비게이션 수위는 주로 루트의 진입과 이탈을 감청하는 데 쓰인다.**$route**vue-router과vue-router의 갈고리 함수를 제공하여 루트가 바뀌기 전과 바뀌기 전에 촉발됩니다.탐색 갈고리의 세 가지 매개 변수 해석:
갈고리

beforeEach: 곧 들어갈 목표의 루트 대상.

afterEach: 현재 떠나려는 라우팅 객체를 탐색합니다.

to: 이 방법을 사용해야 다음 갈고리에 들어갈 수 있습니다.

후면 갈고리 (afterEach) 라면 넥스트 () 함수를 주동적으로 호출할 필요가 없습니다

//  (guard)
router.beforeEach((to, from, next) => {
  //  from to。to   from   route
  //  matched[0]
  document.title = to.matched[0].meta.title
  next()
})

//  (hook)
router.afterEach((to, from) => {
})

네비게이션 수위는 전역 수위, 루트 단독 수위, 구성 요소 내의 수위로 나뉜다.

keep-alive

from는 포함된 구성 요소의 상태를 유지하거나 다시 렌더링되지 않도록 하는 Vue 내장 구성 요소입니다.
두 가지 중요한 속성:

next - 일치하는 구성 요소만 캐시되는 문자열 또는 정규 표현

keep-alive - 일치하는 구성 요소가 캐시되지 않는 문자열 또는 정규 표현식

두 가지 특유의 함수: 두 개의 갈고리 함수include(활약)와exclude(활약적이지 않음)activated deactivated 안에 직접 포함되면 모든 경로가 일치하는 보기 구성 요소가 캐시됩니다.

 export default {
    name: "Home",
    data() {
      return {
        path: '/home/news'
      }
    },
    //  ,  keep-alive ,  
    activated() {
      this.$router.push(this.path);
      console.log('Home activated');
    },
    deactivated() {
      console.log('Home deactivated');
    },
    created() {
      console.log("Home ");
    },
    destroyed() {
      console.log("Home ");
    },
    beforeRouteLeave(to, from, next) {
      console.log(this.$route.path);
      this.path = this.$route.path;
      next();
    }
  } 

Keep-alive가 겪는 문제b 구성 요소에 d, e 구성 요소가 있습니다. b에서keep-alive를 사용하지 않으면 D, e 구성 요소의 상태가 보존되지 않습니다.그러나 d, e 구성 요소에서activated와deactivated를 사용할 수 있습니다.