Vue3+TS+Vite 개발 기술: 라우팅 관리를 위해 Vue Router를 사용하는 방법

Vue3+TS+Vite 개발 기술: 라우팅 관리를 위해 Vue Router를 사용하는 방법

최근 몇 년 동안 Vue 프레임워크는 프런트 엔드 개발 분야의 개발자들 사이에서 점점 더 인기를 얻고 있습니다. Vue 생태계에서 최신 라우팅 관리 도구인 Vue Router는 우수한 사용자 경험을 갖춘 단일 페이지 애플리케이션을 구축하는 데 도움이 될 수 있습니다. 이 기사에서는 라우팅 관리를 위해 Vue3 및 TypeScript와 함께 Vue Router를 사용하는 개발 기술을 공유합니다.

1. Vue Router 설치 및 초기화

먼저 npm 또는 Yarn 명령을 사용하여 Vue Router를 설치해야 합니다. 터미널을 열고 다음 명령을 실행합니다:

npm install vue-router@next

그런 다음 Vue3 프로젝트의 항목 파일(main.ts 또는 main.js)에서 Vue Router를 소개하고 이를 Vue 애플리케이션과 연결해야 합니다. 샘플 코드는 다음과 같습니다.

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
  // 其他路由配置
]

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

createApp(App)
  .use(router)
  .mount('#app')

위 샘플 코드에서는 먼저 createRouter 함수를 통해 Vue Router 인스턴스를 생성하고 라우팅 기록 모드와 라우팅 테이블을 구성했습니다. 이후 createApp 함수를 통해 Vue 애플리케이션 인스턴스가 생성되고, 생성된 Vue Router 인스턴스는 use 메소드를 통해 Vue 애플리케이션에 등록됩니다.

2. 경로 및 구성 요소 정의

이전 단계에서는 기본 라우팅 테이블을 구성했습니다. 이 예에서는 Home이라는 경로만 추가하고 해당 구성 요소를 Home 구성 요소로 설정했습니다. 다음으로 이 구성 요소를 만들어야 합니다.

src/views 디렉터리에서 Home.vue라는 파일을 만들고 다음과 같이 파일 내용을 편집합니다.

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: "Home"
})
</script>

<style scoped>
</style>

이 샘플 코드에서는 Vue의 새로운 기능인 Composition API를 사용합니다. DefineComponent 함수를 통해 구성 요소를 정의하고 이 구성 요소를 내보냅니다. 이 구성 요소에서는 "Home" 제목이 포함된 div 요소를 렌더링합니다.

3. 탐색 및 경로 점프

처음 두 단계를 기반으로 기본 Vue Router 애플리케이션을 성공적으로 만들었습니다. 다음으로 Vue Router에서 제공하는 탐색 및 라우팅 점프와 관련된 몇 가지 방법과 기술을 소개합니다.

1. 탐색을 위해 구성 요소를 사용하세요

Vue Router는 라우팅 탐색 기능을 구현하기 위해 편리한 구성 요소인 를 제공합니다. 템플릿에서는 를 사용하고 to 속성을 설정하여 점프해야 하는 라우팅 경로를 지정하기만 하면 됩니다.

샘플 코드는 다음과 같습니다.

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

이 예에서는 Home 구성 요소에 구성 요소를 클릭하면 "/about" 경로로 이동합니다.

2. 프로그래밍 방식 탐색을 위해 router.push() 메소드 사용

탐색을 위해 템플릿의 구성 요소를 사용하는 것 외에도 Vue Router는 프로그래밍 방식 탐색 방식도 제공합니다. 라우팅 점프를 수행하기 위해 컴포넌트 스크립트에서 router.push() 메소드를 사용할 수 있습니다.

샘플 코드는 다음과 같습니다.

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: "Home",
  methods: {
    goToAbout() {
      const router = useRouter()
      router.push('/about')
    }
  }
})

이 예제에서는 goToAbout 메소드를 정의하고, 메소드 내에서 useRouter 함수를 사용하여 현재 Vue Router 인스턴스를 얻은 다음, router.push('/about'을 통해 라우팅 점프를 수행합니다. ).

4. 동적 라우팅 및 라우팅 매개변수

Vue 라우터는 동적 라우팅 및 라우팅 매개변수도 지원합니다. 라우팅 경로에 자리 표시자를 구성하면 동적 매개변수가 포함된 라우팅 경로를 생성하고 $route.params 객체를 통해 라우팅 매개변수 값을 얻을 수 있습니다.

샘플 코드는 다음과 같습니다.

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
  // 其他路由配置
]

const User = defineComponent({
  name: "User",
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  created() {
    console.log(this.id) // 输出路由参数id的值
  }
})

위 예시에서는 동적 매개변수가 포함된 라우팅 경로 /user/:id를 정의하고, props 속성을 통해 라우팅 매개변수의 값을 전달받아 검증합니다. User 컴포넌트의 생성된 Life Cycle Hook 기능에서 console.log(this.id)를 통해 라우팅 매개변수 id 값을 출력할 수 있습니다.

5. 경로 보호

실제 프로젝트에서는 경로 점프 전에 사용자 로그인 확인, 페이지 권한 제어 등 몇 가지 추가 논리 처리를 수행해야 하는 경우가 많습니다. Vue Router는 이러한 요구 사항을 충족하기 위해 경로 가드를 제공합니다.

Vue Router에서 일반적으로 사용되는 세 가지 라우팅 가드는 beforeEach, beforeEnter 및 beforeLeave입니다. 경로가 점프하기 전, 특정 경로에 진입하기 전, 특정 경로를 떠나기 전에 각각 트리거됩니다.

샘플 코드는 다음과 같습니다.

router.beforeEach((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeEnter((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeLeave((to, from, next) => {
  // 逻辑处理
  next()
})

위의 예에서는 라우터 객체의 해당 메소드를 통해 전역 라우팅 가드를 등록하고 콜백 함수에서 추가 논리 처리를 수행합니다. 로직을 처리한 후 next() 메서드를 호출하여 라우팅 점프를 계속합니다.

6. 요약

Vue 생태계의 중요한 부분인 Vue Router는 Vue3+TS+Vite 개발 환경에서 사용하기가 더욱 간편해지고 유연해졌습니다. 이 기사에서는 Vue Router 설치 및 초기화, 경로 및 구성 요소 정의, 탐색 및 경로 점프, 동적 경로 및 경로 매개 변수, 경로 보호 등 경로 관리를 위해 Vue Router를 사용하는 방법에 대한 몇 가지 주요 팁을 공유합니다.

이러한 기술을 습득함으로써 우리는 Vue Router를 더 잘 사용하여 좋은 사용자 경험을 갖춘 단일 페이지 애플리케이션을 구축하고 프런트 엔드 개발에서 더 큰 역할을 할 수 있습니다. 이 기사가 Vue3+TS+Vite 프로젝트에서 라우팅 관리를 위해 Vue Router를 사용하는 독자에게 도움과 지침을 제공할 수 있기를 바랍니다.

위 내용은 Vue3+TS+Vite 개발 기술: 라우팅 관리를 위해 Vue Router를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!