Vue3의 라우팅 기능: SPA 애플리케이션에 대한 라우팅 점프 구현

Vue3은 현재 가장 인기 있는 JavaScript 프레임워크 중 하나이며, 최근 업데이트에서 Vue3는 매우 유용한 몇 가지 새로운 기능을 도입했으며 그 중 하나는 더욱 강력한 라우팅 기능입니다.

Vue3의 라우팅 기능과 Vue2의 라우팅 기능에는 약간의 차이가 있으므로 Vue3의 라우팅 기능을 배우기 전에 Vue2의 라우팅을 검토해야 합니다.

Vue2의 라우팅은 Vue Router를 사용하여 구현됩니다. 먼저 프로젝트에 Vue Router를 설치한 다음 Vue 인스턴스에서 구성해야 합니다. 간단한 라우팅 시스템의 경우 각 경로와 해당 구성 요소만 지정하면 됩니다.

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

위 코드에서는 '/' 및 '/about'이라는 두 개의 경로가 포함된 Vue Router 인스턴스를 생성합니다. 사용자가 이러한 URL을 방문하면 Vue Router는 해당 구성 요소를 렌더링합니다.

Vue3 라우팅의 주요 변경 사항은 새로운 API를 사용하여 라우팅 기능의 사용을 단순화하는 것입니다. 다음으로 Vue3의 라우팅 기능을 자세히 소개하겠습니다.

Create Vue3 Route

먼저 Vue Router 4를 설치해야 합니다:

npm install vue-router@4

그런 다음 Vue 애플리케이션에서 Vue Router를 가져와서 Vue Router 인스턴스를 생성해야 합니다:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

Vue2의 라우팅과 달리 이제 우리는 새로운 Router() 대신에 createRouter() 함수를 사용하여 경로를 생성합니다.

Vue3 라우팅의 주요 변경 사항은 라우팅 기능이 보다 선언적인 접근 방식을 채택한다는 것입니다. createWebHistory() 함수를 사용하여 HTML5 기록 모드 사용을 지정합니다. 이는 전체 페이지를 다시 로드하지 않고도 페이지 URL을 보다 안전하게 업데이트할 수 있는 비교적 새로운 기술입니다.

경로 정의

경로 정의 방법은 Vue2와 동일합니다. 경로 배열을 사용하여 경로를 정의할 수 있습니다. 각 경로는 경로와 해당 구성 요소로 구성됩니다.

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

경로 매개변수

경로 매개변수를 사용하면 URL이 변수 값을 갖도록 만들 수 있습니다. 예를 들어 다음과 같은 경로와 URL을 구성할 수 있습니다.

const routes = [
  { path: '/user/:id', component: User }
]

그러면 URL의 :id 부분이 모든 문자열 값을 허용하는 매개변수가 됩니다. 예:

/user/1
/user/abc
/user/123abc

구성 요소에서 $route.params를 사용할 수 있습니다. 경로 매개변수에 액세스합니다. 예:

export default {
  name: 'User',
  created() {
    console.log(this.$route.params.id)
  }
}

이렇게 하면 구성 요소가 생성될 때마다 경로 매개변수가 출력됩니다.

이름이 지정된 경로

경로를 정의할 때 이름을 지정할 수 있습니다. 이는 특정 경로 탐색 방법에 유용합니다. 예:

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

$name 속성을 통해 액세스할 수 있는 명명된 경로를 정의합니다.

router.push({ name: 'user', params: { id: 123 }})

이렇게 하면 매개변수 ID가 있는 사용자 구성 요소로 이동합니다.

경로 탐색

다음 방법을 사용하여 다른 경로로 이동할 수 있습니다:

// 带路径的导航
router.push('/about')

// 带命名的导航
router.push({ name: 'user', params: { id: 123 }})

// 重定向到另一个路由
router.replace('/about')

구성 요소에서 라우팅을 사용할 때 $route 개체를 사용하여 현재 경로 정보에 액세스할 수 있습니다.

export default {
  name: 'About',
  created() {
    console.log(this.$route.path)
  }
}

Route Guards

Route Guard는 탐색을 확인하는 메커니즘으로, 모든 경로를 가로채기 전이나 후에 코드를 실행할 수 있습니다. Vue3에서는 다음과 같은 경로 가드를 사용할 수 있습니다:

const router = createRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // 在此处添加路由守卫代码
  next()
})

beforeEach 가드에서는 사용자가 로그인했는지 확인하거나 사용자가 탐색을 계속하는 데 필요한 작업을 완료하도록 할 수 있습니다.

요약

Vue3에는 라우팅이 크게 개선되어 Vue2보다 사용하기가 더 쉬워졌습니다. 보다 선언적인 접근 방식이 필요하므로 경로를 더 쉽게 정의하고 사용할 수 있습니다. 또한 Vue3에는 라우팅을 더욱 안전하고 유용하게 만드는 HTML5 기록 모드도 도입되었습니다.

Vue3의 라우팅 기능을 사용하면 자신만의 SPA 애플리케이션을 만드는 데 도움이 되며 쉽게 점프하고 탐색할 수 있습니다.

위 내용은 Vue3의 라우팅 기능: SPA 애플리케이션에 대한 라우팅 점프 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!