Vue 문서에서 라우팅 기능을 사용하는 방법

Vue는 구성 요소, 상태 관리, 라우팅 기능을 비롯한 다양한 프런트엔드 기술과 개념을 사용하는 인기 있는 JavaScript 프레임워크입니다. SPA(Single Page Application) 애플리케이션에서 라우팅은 매우 중요한 부분입니다. Vue Router는 애플리케이션 라우팅을 관리하는 쉬운 방법을 제공하므로 애플리케이션에서 경로와 해당 구성 요소를 정의할 수 있습니다. 이 글에서는 Vue 문서에서 라우팅 기능을 사용하는 방법을 소개합니다.

Vue Router 설치

Vue Router를 사용하기 전에 Vue Router를 설치해야 합니다. npm을 통해 Vue Router를 설치하세요:

$ npm install vue-router

Vue Router의 기본 구조

Vue에서 경로는 URL 주소와 구성 요소 간의 대응입니다. 다음은 Vue Router의 기본 구조입니다.

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

공식적으로 제공되는 생성자 VueRouter를 사용하여 새로운 라우팅 인스턴스를 생성할 수 있습니다. 이 예에서는 라우팅 패턴과 라우팅 규칙을 정의합니다. 두 가지 라우팅 모드가 있는데, 하나는 해시 모드이고 다른 하나는 기록 모드입니다. 라우팅 규칙은 여러 경로로 나누어지며, 각 경로에는 경로(path), 이름(name) 및 해당 구성 요소(composite)가 있습니다.

라우팅 렌더링 방법

Vue 애플리케이션에서 라우팅을 사용하려면 먼저 라우팅의 해당 부분을 호스팅할 라우터 보기 구성 요소를 설정해야 합니다. 구성 요소 위치와 라우팅 규칙 간의 경로 일치를 기반으로 Vue는 자동으로 해당 위치에 올바른 구성 요소를 렌더링합니다. 아래와 같이

<template>
  <div id="app">
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <router-view></router-view>
  </div>
</template>

이 예에서는 라우팅 구성 요소가 라우터 보기 구성 요소 내부에 표시됩니다.

동적 매개변수 사용

때로는 경로에 동적 매개변수를 사용해야 할 때가 있습니다. 예를 들어, 블로그 애플리케이션에서는 기사 ID로 기사 콘텐츠를 가져와야 합니다. 백엔드에서 URL에는 "/blog/123"과 같은 동적 기사 ID 매개변수가 있습니다. 여기서 123은 기사 ID입니다. Vue에서는 라우팅 규칙을 사용하여 동적 매개변수를 설정할 수 있습니다.

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/blog/:id',
      name: 'blog',
      component: Blog
    }
  ]
})

이 예에서는 동적 매개변수를 사용하여 라우팅 규칙을 정의합니다. 매개변수는 ":id"와 같이 콜론으로 시작합니다. "/blog/123"이 일치하면 "123"이 동적 매개변수가 됩니다. 동시에 컴포넌트에서 이 매개변수를 사용하는 것도 매우 쉽습니다.

export default {
  data () {
    return {
      postId: null
    }
  },
  created () {
    this.postId = this.$route.params.id
    // 根据post id获取文章
  }
}

컴포넌트 인스턴스에서 매개변수는 this.$route.params.id를 통해 얻을 수 있습니다.

Programmatic Navigation

이 장의 시작 부분에서 Vue Router 인스턴스를 만들었습니다. 이 예를 사용하여 프로그래밍 방식으로 라우팅 전환을 구현할 수 있습니다. Vue Router는 프로그래밍 방식 탐색을 구현하는 두 가지 방법인 $router.push() 및 $router.replace()를 제공합니다.

위의 예에는 두 개의 라우팅 버튼이 있으며 각각 다른 경로에 연결되어 있습니다. 버튼의 클릭 이벤트를 라우팅하면 기본 JavaScript에서 $router.push()를 사용하여 특정 경로로 이동할 수 있습니다.

<template>
  <div id="app">
    <header>
      <button @click="$router.push('/')">Home</button>
      <button @click="$router.push('/about')">About</button>
    </header>
    <router-view></router-view>
  </div>
</template>

Navigation Guards

경로를 전환할 때 다음과 같은 일부 작업을 수행해야 할 수도 있습니다. 승인, 데이터 로드 등 Vue Router는 이 문제를 해결하기 위해 Navigation Guard를 제공합니다. 내비게이션 가드(Navigation Guard)는 경로 전, 후, 진입 시 등 경로를 탐색할 때 실행할 수 있는 기능 모음입니다. Vue Router는 글로벌 가드, 구성 요소 가드 및 라우팅 가드의 세 가지 유형의 탐색 가드를 제공합니다.

Global Guard

Global Guard는 전체 애플리케이션에 정의된 가드이며 모든 페이지에 적용됩니다. Vue Router는 다음을 포함한 일부 글로벌 가드를 제공합니다.

• beforeEach(to, from, next): 경로에 진입하기 전에 실행됩니다.
• afterEach(to, from): 경로가 진입한 후 실행됩니다.

컴포넌트 가드

컴포넌트 가드는 컴포넌트 내에 정의된 가드로, 컴포넌트에 진입할 때 실행됩니다. Vue Router는 다음과 같은 구성 요소 Guard를 제공합니다.

• beforeRouteEnter(to, from, next): 구성 요소에 들어가기 전에 실행되므로 구성 요소 인스턴스에 접근할 수 없습니다.
• beforeRouteUpdate(to, from, next): 경로가 업데이트되고 구성 요소 인스턴스에 액세스할 수 있을 때 실행됩니다.
• beforeRouteLeave(to, from, next): 컴포넌트를 나갈 때 실행되며, 컴포넌트 인스턴스에 접근할 수 있습니다.

Routing Guard

Routing Guard는 경로가 정의되어 특정 경로에 적용되는 가드입니다. Vue Router는 다음과 같은 라우팅 가드를 제공합니다:

• beforeEnter(to, from, next): 경로에 진입하기 전에 실행되며 이 경로에만 적용됩니다.
• beforeResolve(to, from, next): 경로가 진입할 때 실행되며, 컴포넌트 인스턴스에 접근할 수 있습니다.

요약

라우팅은 Vue 애플리케이션에서 매우 중요한 부분이며 Vue Router는 라우팅을 관리하는 간단한 방법을 제공합니다. 이번 글에서는 Vue Router의 기본 구조, 렌더링 방법, 동적 매개변수, 프로그래밍 방식 탐색 및 탐색 가드에 대해 소개했습니다. Vue Router는 강력하고 사용하기 쉬운 라우팅 라이브러리입니다. Vue 애플리케이션을 확장하려면 이 문서에 제공된 API를 참조하세요.

위 내용은 Vue 문서에서 라우팅 기능을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!