Vue3의 라우팅 기능에 대한 자세한 설명: SPA 애플리케이션의 경로 점프를 구현하는 애플리케이션

프런트 엔드 기술의 지속적인 개발로 SPA(단일 페이지 애플리케이션)가 프런트 엔드 개발의 주류가 되었으며 라우팅은 SPA 애플리케이션의 필수적인 부분입니다. Vue3에서는 라우팅 기능이 업데이트 및 개선되어 더욱 사용하기 쉽고 강력해졌습니다. 이 글에서는 Vue3에서 라우팅 기능을 적용하는 방법과 SPA 애플리케이션에서 라우팅 점프를 구현하는 방법을 자세히 소개합니다.

1. Vue3의 라우팅 기능

Vue3의 경로 점프는 모두 라우팅 기능을 통해 완료됩니다. 이 기능의 기본 사용법은 다음과 같습니다.

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

router.push('/home')

라우트 점프는 라우터를 호출하여 수행할 수 있습니다. .push() 함수는 이동할 경로를 지정합니다. 그 중 createRouter() 함수는 라우터를 생성하는 데 사용되며, History 매개변수는 라우팅 모드를 지정하고, Route 매개변수는 라우팅 경로와 구성 요소 간의 매핑 관계를 정의합니다.

2. 루트 가드 구현

실제 개발에서는 루트 점프를 제한하고 제어해야 하는 경우가 있습니다. 이때 Vue3에서 제공하는 Route Guard(Route Guard)를 사용할 수 있습니다. 루트 가드는 루트가 점프하려고 할 때 호출되는 함수입니다. 이 기능에서는 라우팅을 제어하기 위해 판단하고 처리할 수 있습니다. Vue3은 다음과 같은 경로 가드 기능을 제공합니다:

2.1 beforeEach

이 함수는 각 경로 점프 전에 호출됩니다. true를 반환하면 점프를 계속하고 false를 반환하면 점프를 취소합니다. 이 기능에서는 로그인 확인, 권한 판단 및 기타 작업을 수행할 수 있습니다.

router.beforeEach((to, from, next) => {
  // to: 即将要跳转的路由
  // from: 当前页面正要离开的路由
  // next: 控制路由是否可以跳转的函数

  const loggedIn = localStorage.getItem('user')

  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next('/login')
  } else {
    next()
  }
})

2.2 beforeRouteEnter

이 기능은 컴포넌트 내부에서만 사용할 수 있습니다. 이 함수는 구성 요소가 아직 생성되지 않은 경우 호출됩니다. 이 함수에서 구성 요소 인스턴스를 가져오고 가져온 후 작동할 수 있습니다.

export default {
  beforeRouteEnter(to, from, next) {
    axios.get('/user').then(response => {
      if (response.data.isAdmin) {
        next()
      } else {
        next('/403')
      }
    })
  }
}

2.3 beforeRouteUpdate

이 함수는 경로 점프 후에 호출되지만 현재 구성 요소는 여전히 재사용됩니다. 이 함수에서 구성요소의 데이터를 업데이트할 수 있습니다.

export default {
  beforeRouteUpdate(to, from, next) {
    const id = to.params.id
    axios.get(`/user/${id}`).then(response => {
      this.user = response.data
      next()
    })
  }
}

3. 동적 라우팅 구현

때로는 라우팅 점프 시 라우팅 경로를 동적으로 생성해야 할 때가 있습니다. Vue3은 "동적 경로" 기능을 제공합니다. 동적 라우팅은 라우팅 경로에 자리 표시자를 추가하여 구현됩니다. 자리 표시자는 ":"으로 시작합니다.

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

위 예에서는 ":id" 자리 표시자를 통해 라우팅 경로를 동적으로 생성했습니다. 점프를 라우팅할 때 to.params.id를 통해 경로에서 id 값을 얻을 수 있습니다.

router.push({ path: `/user/${userId}` })

4. 중첩 라우팅 구현

복잡한 페이지의 경우 중첩 라우팅을 구현해야 하는 경우가 있습니다. Vue3은 중첩 라우팅도 지원합니다. 상위 경로와 하위 경로에 하위 경로를 정의하여 중첩 라우팅을 구현할 수 있습니다.

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'list',
          component: List
        },
        {
          path: 'detail/:id',
          component: Detail
        }
      ]
    }
  ]
})

위의 예에서는 홈 경로에 목록과 세부정보라는 두 개의 하위 경로를 정의했습니다. List 컴포넌트에서는 $route 객체의 children 속성을 통해 하위 경로 정보를 얻을 수 있습니다.

export default {
  created() {
    console.log(this.$route.children) // [ { path: 'list', ... }, { path: 'detail/:id', ... } ]
  }
}

5. 요약

Vue3에서 라우팅 기능은 SPA 애플리케이션 구현의 핵심 중 하나입니다. 라우팅 기능을 통해 라우팅 점프, 라우팅 가드, 동적 라우팅, 중첩 라우팅 및 기타 기능을 구현할 수 있습니다. 개발자에게 있어 라우팅 기능의 사용법을 익히는 것은 매우 중요한 단계이며 프런트엔드 개발 능력을 향상시킬 수 있는 유일한 방법이기도 합니다.

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