VUE3 기본 튜토리얼: 라우팅 및 탐색

VUE3는 현재 가장 인기 있는 프런트 엔드 개발 프레임워크 중 하나이며, 최신 웹 애플리케이션을 구축하는 간단하고 유연하며 효율적인 방법을 제공합니다. 라우팅 및 탐색은 VUE3 프레임워크의 중요한 기능 중 하나입니다. 이를 통해 페이지 간을 쉽게 전환하고 관리할 수 있습니다.

이 튜토리얼에서는 VUE3 프레임워크의 라우팅 및 탐색에 대한 기본 개념과 사용법을 소개하여 VUE3의 라우팅 및 탐색 기능을 빠르게 시작할 수 있도록 도와줍니다.

1. 라우팅의 기본 개념

라우팅은 서로 다른 URL을 통해 서로 다른 페이지에 접근하는 방식을 말합니다. VUE3에서는 vue-router 라이브러리를 통해 라우팅이 구현됩니다. vue-router는 경로 정의 및 관리 기능을 제공합니다.

vue-router를 사용하기 전에 vue-router 라이브러리를 설치하고 도입해야 합니다. 설치 방법은 다음과 같습니다.

npm install vue-router

vue-router 라이브러리를 도입하는 방법은 다음과 같습니다.

import { createRouter, createWebHashHistory } from 'vue-router'

그 중 createRouter는 경로를 생성하는 방법이고, createWebHashHistory는 라우팅에 해시 모드를 사용하도록 지정합니다.

경로를 정의할 때 경로와 경로의 구성요소를 정의해야 합니다. Path는 해당 경로에 접근하기 위한 URL이고, component는 해당 컴포넌트입니다.

예:

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

위 코드는 두 개의 경로를 정의합니다. 하나는 루트 경로 '/'이고, 해당 구성 요소는 Home이고, 다른 하나는 '/about'이고, 해당 구성 요소는 About입니다.

라우팅 인스턴스를 생성할 때 아래와 같이 정의된 경로를 전달해야 합니다.

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

history는 라우팅 모드를 지정하고 createWebHashHistory는 해시 모드를 사용하는 것을 의미합니다. 다른 모드로는 히스토리 모드와 추상 모드가 있습니다. 경로는 라우팅 구성 배열을 나타냅니다.

2. 내비게이션의 기본 개념

VUE3에서는 라우팅을 통해 URL과 해당 컴포넌트를 정의한 후 페이지 간 전환 및 점프를 위해 내비게이션을 사용해야 합니다.

탐색에는 주로 프로그래밍 방식 탐색과 선언적 탐색이라는 두 가지 방법이 있습니다.

2.1 프로그래밍 방식 탐색

프로그래밍 방식 탐색은 JavaScript 코드를 통해 페이지를 이동하고 전환하는 것을 의미합니다. Vue Router는 이 탐색 방법을 구현하는 몇 가지 방법을 제공합니다.

다음은 일반적으로 사용되는 몇 가지 방법입니다.

• router.push: 대상 페이지로 이동하고 라우팅 기록에 새 레코드를 추가하는 데 사용됩니다.

router.push('/home')

• router.replace: 대상 페이지로 이동하는 데 사용되지만 라우팅 기록에 새 기록을 추가하지는 않습니다.

router.replace('/home')

• router.go: 라우팅 기록에서 지정된 단계 수(양수 또는 음수일 수 있음)만큼 앞으로 또는 뒤로 이동하는 데 사용됩니다.

router.go(-1) //后退一步

2.2 선언적 탐색

선언적 탐색은 템플릿에 선언하여 페이지를 전환하고 건너뛰는 것을 말합니다. Vue Router에서는 라우터 링크 구성 요소를 사용하여 선언적 탐색을 구현할 수 있습니다.

라우터 링크 구성 요소는 라우팅 링크를 통해 페이지로 이동하는 데 사용되는 태그로 렌더링될 수 있습니다.

예:

<router-link to="/home">Home</router-link>

위 코드는 링크를 클릭하면 '/home' 경로로 이동한다는 의미입니다.

동시에 라우터 링크 구성 요소는 매개변수를 사용한 라우팅도 지원합니다. 예:

<router-link :to="{ path: '/user/'+userId }">User</router-link>

위 코드는 링크를 클릭하면 '/user/123' 경로로 이동한다는 의미입니다. 여기서 123은 다음과 같습니다. 사용자 정의 매개변수

3. 라우팅의 고급 개념

VUE3에는 기본 라우팅 및 탐색 기능 외에도 경로 중첩, 명명된 경로, 경로 가드 등과 같은 몇 가지 고급 라우팅 개념도 있습니다.

3.1 경로 중첩

경로 중첩은 여러 경로를 결합하여 부모-자식 관계를 형성하는 것을 의미합니다. VUE3에서는 하위 경로를 정의하여 경로 중첩이 이루어집니다.

예:

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

위 코드에서는 루트 경로 ''와 '/about'이라는 두 개의 하위 경로를 포함하는 Layout이라는 상위 경로가 정의됩니다. 하위 경로는 상위 경로의 975b587bf85a482ea10b0a28848e78a4에 렌더링됩니다.

3.2 명명된 라우팅

명명된 라우팅은 프로그램에서 쉽게 호출할 수 있도록 경로의 이름을 정의하는 것을 의미합니다. Vue Router에서는 name 속성을 통해 경로 이름을 정의할 수 있습니다.

예:

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

위 코드에서 루트 경로 '/' 및 '/about'의 경로 이름은 각각 home 및 about으로 지정됩니다.

프로그래밍 방식 탐색 및 선언적 탐색에서는 해당 경로 이름을 통해 페이지 이동 및 전환을 수행할 수 있습니다.

3.3 경로 가드

경로 가드는 경로가 점프할 때 미리 설정된 후크 기능을 통해 경로 점프 프로세스를 제어하여 특정 요구 사항을 충족할 수 있음을 의미합니다. VUE3에서 Vue Router는 두 가지 유형의 전역 경로 가드와 로컬 경로 가드를 제공합니다.

글로벌 루트 가드는 모든 루트에 대한 통합 제어를 말하며 일반적으로 일부 글로벌 작업에 사용됩니다. 글로벌 라우팅 가드의 후크 기능에는 beforeEach, beforeResolve 및 afterEach가 포함됩니다.

로컬 루트 가드는 특정 경로 또는 경로 그룹에 대한 특정 제어를 말하며 일반적으로 일부 로컬 작업에 사용됩니다. 로컬 경로 가드의 후크 기능에는 beforeEnter, beforeRouteUpdate 및 beforeRouteLeave가 포함됩니다.

예:

router.beforeEach((to, from, next) => {
  // 进行权限判断或其他操作
  next()
})

위 코드에서 전역 경로 가드는 beforeEach 함수를 통해 정의되며 각각 다가오는 경로를 나타내고 현재 경로는 다음 함수에 필요한 함수를 나타냅니다. Route Jump 작업을 실행하기 위해 Guard에서 호출됩니다.

4. 요약

이 튜토리얼에서는 VUE3 프레임워크의 라우팅 및 탐색의 기본 개념과 사용법은 물론 일부 고급 개념도 소개합니다. 본 튜토리얼을 통해 VUE3의 라우팅 및 네비게이션의 기본적인 사용법을 익히고, 실제 프로젝트에서 라우팅 및 네비게이션 기능을 적용할 수 있기를 바랍니다.

위 내용은 VUE3 기본 튜토리얼: 라우팅 및 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!