vue-router가 라우팅 점프와 페이지 렌더링을 구현하는 방법

Vue-router는 Vue.js의 공식 라우팅 관리 도구입니다. Vue.js를 기반으로 하는 단일 페이지 애플리케이션(SPA) 구축을 지원합니다. Vue.js에서 제공하는 라우팅 기능을 통해 경로를 관리하여 페이지 이동 및 표시를 제어할 수 있습니다. URL.

이 기사에서는 Vue-router의 기본 구현 원리에 초점을 맞추고 Vue-router가 라우팅 점프 및 페이지 렌더링을 구현하는 방법을 분석합니다.

1. Vue-router의 기본 사용

Vue-router를 사용하려면 다음 단계를 수행해야 합니다.

1. Vue-router 및 Vue.js 설치

npm install vue-router

2. Vue 인스턴스 만들기

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

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
});

new Vue({
    router,
    el: '#app',
    template: '<App/>',
    components: { App }
});

위 코드에서는 Vue.use() 메소드를 사용하여 Vue-router를 등록하고 라우팅 인스턴스를 생성한 후 이를 Vue 인스턴스의 옵션으로 사용하여 Vue 인스턴스와 전체 애플리케이션의 각 구성요소에서 사용할 수 있도록 했습니다. Vue 라우터.

동시에 라우팅 인스턴스에서 두 개의 라우팅 객체를 정의합니다. 각 라우팅 객체는 세 가지 속성으로 구성됩니다.

• path: path, 이 라우팅 객체에 해당하는 URL 경로 지정
• name: 경로 이름 컴포넌트 이름과 다릅니다. 편의상 이름이며 $router.push() 및 $router.replace() 메소드로 호출할 수 있습니다.
• comComponent: 현재 경로에 해당하는 컴포넌트입니다.

Vue 구성 요소에서는 $router 및 $route 개체를 사용하여 라우팅 관련 작업을 수행할 수 있습니다.

• $router: 다른 경로로 점프하는 데 사용됩니다.
• $route: 현재 경로 정보를 가져오는 데 사용됩니다. .

2. Vue-router의 구현 원리

라우팅 점프 및 페이지 렌더링을 구현하는 Vue-router의 기본 원리:

1. URL 변경 모니터링

Vue-router는 URL에 따라 URL 변경을 모니터링합니다. 다른 페이지를 표시합니다.

데이터 바인딩 측면에서 Vue.js는 데이터의 양방향 바인딩을 구현하는 Object.defineProperty() 메서드를 내부적으로 캡슐화합니다. 그러나 Vue.js는 URL 변경을 처리할 방법이 없습니다. 따라서 Vue-router에는 URL 변경을 모니터링하는 새로운 방법이 필요합니다.

Vue-router는 H5의 라우팅 API(history.pushState(state, title, url) 및 History.replaceState(state, null, url))를 사용하여 URL 변경을 모니터링합니다. URL이 변경되면 Vue-router는 내부 라우팅 변경 메커니즘을 트리거하고 현재 URL을 사용하여 렌더링해야 하는 구성 요소를 추론합니다.

2. 라우팅 규칙 일치

Vue-router는 경로가 변경될 때 이전 URL과 다음 URL을 비교하여 경로가 순방향인지 역방향인지 결정한 후 다른 방법을 호출하여 다른 보기를 표시합니다.

Vue-router 내부에서 라우팅 규칙은 라우팅 레코드로 구문 분석됩니다. 각 라우팅 레코드에는 URL 경로와 해당 구성 요소 정보가 포함됩니다. 이러한 라우팅 레코드는 내부 라우팅 테이블에 저장됩니다.

URL이 변경되면 Vue-router는 URL 경로를 일치시켜 현재 URL 경로와 일치하는 라우팅 레코드를 라우팅 테이블에서 검색합니다. 존재하는 경우 URL 경로가 합법적이라는 의미이며 구성 요소를 구문 분석합니다. 렌더링해야 하는 것입니다.

3. 렌더링 구성 요소

적법한 라우팅 규칙이 일치하면 Vue-router는 라우팅 규칙에 정의된 구성 요소를 사용하여 표시해야 하는 페이지를 렌더링합니다.

컴포넌트를 렌더링할 때 Vue-router의 주요 아이디어는 렌더링할 컴포넌트를 RouterView 컴포넌트에 마운트하는 것입니다. 경로가 변경되면 RouterView 컴포넌트는 현재 경로 기록 정보를 기반으로 해당 컴포넌트를 렌더링합니다.

Vue-router는 구성 요소의 경로를 점프하고 교체하는 데 사용되는 $router.push() 및 $router.replace()와 같은 일부 경로 탐색 API도 제공합니다.

3. 요약

Vue.js의 공식 라우팅 관리 도구인 Vue-router는 단일 페이지 애플리케이션을 빠르게 구축하는 데 도움이 됩니다. Vue-router의 기본 구현 원칙은 주로 URL 변경 모니터링, 라우팅 규칙 일치 및 구성 요소 렌더링을 통해 구현됩니다. Vue-router는 URL 변경에 따라 앞으로 이동할지 뒤로 이동할지 결정하고 해당 뷰를 표시할 수 있는 라우팅 변경 메커니즘을 내부적으로 캡슐화합니다. 동시에 Vue-router는 Vue 구성 요소의 점프 및 교체 라우팅을 위한 편리한 API를 제공합니다. Vue-router의 원리와 사용법을 익히면 단일 페이지 애플리케이션을 더 잘 구축하고 프런트 엔드 개발 기능을 향상시키는 데 도움이 될 수 있습니다.

위 내용은 vue-router가 라우팅 점프와 페이지 렌더링을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!