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

Vue3은 최신 Vue 버전이며, 라우팅 기능이 Vue2 버전에 비해 크게 변경되었습니다. 단일 페이지 애플리케이션(SPA)을 구현하는 중요한 도구 중 하나로 Vue3의 라우팅 기능이 널리 사용됩니다. 이 기사에서는 라우팅 점프 및 구현을 포함하여 Vue3의 라우팅 기능을 자세히 설명합니다.

1. Vue3 라우팅 기능 소개

Vue3의 라우팅 기능은 주로 라우팅 인스턴스와 라우터의 두 부분으로 구성됩니다. 그중 라우팅 인스턴스는 경로와 점프 경로를 정의하는 데 사용되는 Vue 라우터 인스턴스이며, 라우터는 라우팅 인스턴스를 Vue 인스턴스에 주입하여 라우팅 점프를 활성화하는 역할을 합니다.

2. 라우팅 인스턴스

1. 라우팅 인스턴스 생성

Vue3에서는 Vue Router 함수를 호출하여 라우팅 인스턴스를 생성할 수 있습니다.

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

위 코드에서 createRouter() 함수는 <code>history 및 routes라는 두 가지 속성을 포함한 구성 개체를 허용할 수 있습니다. 그 중 history는 라우팅 모드를 지정하는 데 사용되고, routes는 라우팅 테이블을 정의하는 데 사용됩니다. createRouter()函数可以接受一个配置对象，包括history和routes两个属性。其中history用于指定路由模式，routes则用于定义路由表。

2. 路由表定义

路由表是由路由配置对象数组组成的，数组中每个对象都表示一个路由的定义，包括以下几个属性：

• path：路由路径；
• component：路由组件；
• name：路由名称；
• meta：路由元信息。

在路由表中，我们可以使用path和component来定义路由路径和路由组件，示例代码如下：

import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';

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

路由路径可以使用占位符来表示动态参数，示例代码如下：

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

上述示例中，路由路径/user/:id中的冒号表示该路径可以匹配一个动态参数，我们可以通过props属性来将动态参数作为组件属性传递到路由组件中。

3. 嵌套路由

在Vue3中，我们可以使用嵌套路由来组织应用的路由结构。嵌套路由是指路由路径包含多个层级的情况，示例代码如下：

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

上述示例中，我们在/路径下定义了一个名为Layout的路由组件，并将其作为嵌套路由的父级路径。Layout组件中存在三个子路由，分别对应不同的路径。

4. 路由守卫

路由守卫用于在路由跳转前或跳转后执行一些逻辑操作。在Vue3中，路由守卫主要分为全局守卫、路由守卫和组件守卫三类。

全局守卫有三种：

• beforeEach：在路由跳转前执行逻辑；
• beforeResolve：在路由解析完成后，进行路由匹配前执行的逻辑；
• afterEach：路由跳转后执行的逻辑。

路由守卫分为两种：

• beforeEnter：在进入路由之前执行的逻辑；
• beforeLeave：在离开路由之前执行的逻辑。

组件守卫是针对组件级路由而言，包括以下几种：

• beforeRouteEnter：在组件进入路由前执行的逻辑；
• beforeRouteUpdate：在组件更新路由前执行的逻辑；
• beforeRouteLeave：在组件离开路由前执行的逻辑。

三、路由器

1. 注入路由

在创建好路由实例后，我们需要将其注入到Vue实例中，使之生效。在Vue3中，我们可以通过调用createApp函数来创建Vue实例，示例代码如下：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

在上述代码中，我们使用createApp函数创建Vue实例，并通过use方法将路由实例router注入到Vue实例中。

2. 路由跳转

在Vue3中，我们可以通过调用router.push方法实现路由跳转。router.push方法接受一个参数，用于指定需要跳转的路由路径。示例代码如下：

import { RouterLink } from 'vue-router';

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/contact">Contact</RouterLink>

在上述示例中，我们使用c3eee9878978ade0d6491433c64180cf组件代替了Vue2版本中的b988a8fd72e5e0e42afffd18f951b277

라우팅 테이블 정의
🎜라우팅 테이블은 라우팅 구성 객체의 배열로 구성됩니다. 배열의 각 객체는 다음 속성을 포함하여 경로 정의를 나타냅니다. 🎜

🎜 경로: 라우팅 경로; 🎜🎜구성 요소: 라우팅 구성 요소 🎜🎜이름: 라우팅 이름; > : 라우팅 메타 정보입니다. 🎜

🎜라우팅 테이블에서 path 및 comment를 사용하여 라우팅 경로와 라우팅 구성 요소를 정의할 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜The 라우팅 경로를 사용하여 동적 매개변수를 나타낼 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜위 예에서 라우팅 경로 /user/:id의 콜론은 경로가 일치할 수 있음을 나타냅니다. 동적 매개변수인 경우 props 속성을 ​​전달하여 동적 매개변수를 구성 요소 속성으로 라우팅 구성 요소에 전달할 수 있습니다. 🎜

🎜Nested Routing🎜🎜🎜Vue3에서는 중첩 라우팅을 사용하여 애플리케이션의 라우팅 구조를 구성할 수 있습니다. 중첩된 라우팅은 라우팅 경로에 여러 수준이 포함된 상황을 나타냅니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜위 예에서는 / 아래에 <code>Layout이라는 파일을 정의했습니다. code> 경로 라우팅 구성 요소를 중첩 경로의 상위 경로로 만듭니다. Layout 구성 요소에는 서로 다른 경로에 해당하는 세 가지 하위 경로가 있습니다. 🎜
🎜Route Guard🎜🎜🎜Route Guard는 루트 점프 전후에 일부 논리적 작업을 수행하는 데 사용됩니다. Vue3에서 라우팅 가드는 주로 글로벌 가드, 라우팅 가드 및 구성 요소 가드의 세 가지 범주로 나뉩니다. 🎜🎜글로벌 가드에는 세 가지 유형이 있습니다. 🎜
🎜beforeEach: 경로 점프 전 논리 실행 🎜🎜beforeResolve: 경로 구문 분석이 완료된 후, 경로 일치 전 실행 논리; 🎜🎜afterEach: 라우팅 점프 후에 실행되는 논리입니다. 🎜
🎜경로 가드는 두 가지 유형으로 나뉩니다. 🎜
🎜beforeEnter: 경로에 진입하기 전에 실행되는 논리 🎜🎜beforeLeave: 경로를 떠나기 전 실행 논리. 🎜
🎜구성 요소 가드는 다음을 포함하여 구성 요소 수준 라우팅을 위한 것입니다. 🎜
🎜beforeRouteEnter: 구성 요소가 경로에 진입하기 전에 실행되는 논리 🎜🎜beforeRouteUpdate code>: 구성 요소가 경로를 업데이트하기 전에 실행되는 논리 🎜🎜<code>beforeRouteLeave: 구성 요소가 경로를 떠나기 전에 실행되는 논리. 🎜
🎜3. 라우터 🎜🎜🎜라우팅 삽입 🎜🎜🎜라우팅 인스턴스를 생성한 후 이를 Vue 인스턴스에 삽입해야 효과가 발생합니다. Vue3에서는 createApp 함수를 호출하여 Vue 인스턴스를 생성할 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜위 코드에서는 createApp 함수를 사용합니다. Vue 인스턴스를 생성하고 use 메소드를 통해 라우팅 인스턴스 router를 Vue 인스턴스에 삽입합니다. 🎜
🎜경로 점프🎜🎜🎜Vue3에서는 router.push 메서드를 호출하여 경로 점프를 구현할 수 있습니다. router.push 메소드는 점프해야 하는 라우팅 경로를 지정하는 매개변수를 허용합니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜위 예에서는 Vue2의 b988a8fd72e5e0e42afffd18f951b277 구성 요소 대신 <routerlink> 구성 요소를 사용합니다. 구현을 위한 버전 경로 점프. 🎜🎜위는 라우팅 인스턴스 및 라우터 사용, 라우팅 점프 구현 등 Vue3의 라우팅 기능에 대한 자세한 설명입니다. 이 글을 공부함으로써 Vue3의 라우팅 기능을 더 잘 이해하게 되리라 믿습니다. 🎜</routerlink>

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