vue3 라우팅에서 매개변수 ts를 작성하는 방법

Vue3은 뛰어난 구성 요소화 및 응답성을 갖춘 현재 인기 있는 프런트 엔드 프레임워크 중 하나입니다. vue-router는 Vue에서 공식적으로 제공하는 라우팅 플러그인으로, 프런트엔드 애플리케이션의 페이지 간을 이동하고 단일 페이지 애플리케이션(SPA)을 구현할 수 있습니다.

개발 중에는 한 페이지에서 다른 페이지로 이동하고 해당 데이터를 표시하는 등 경로 간에 매개변수를 전달해야 하는 경우가 있습니다. 다음으로, 잘못된 매개변수 전달로 인해 발생하는 런타임 예외를 방지하기 위해 TypeScript 유형 검사와 결합된 Vue3의 vue-router를 통해 매개변수를 전달하는 방법을 소개합니다.

vue-router 설치

vue-router를 사용하여 경로 점프를 구현하기 전에 먼저 vue-router를 설치해야 합니다.

npm install vue-router@next

경로 정의

다음으로 Vue 애플리케이션에서 경로를 정의해야 합니다. Vue3에서는 경로가 Vue2와 다르게 정의됩니다. 다음은 간단한 샘플 코드입니다.

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    props: true
  },
  {
    path: '/page/:id',
    name: 'Page',
    component: Page,
    props: true
  }
];

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

export default router;

그 중 createRouter와 createWebHistory는 라우팅 인스턴스 및 기록 관리자 생성을 위해 Vue3에서 제공하는 팩토리 메소드입니다. createRouter和createWebHistory是由Vue3提供的工厂方法，用于创建路由实例和历史记录管理器。

在定义路由时，我们需要指定路径、路由名称和组件。此外，我们还可以通过设置props: true，将路径参数作为组件属性传递，方便组件接收参数。

路由跳转

下面是一个基本的路由跳转示例代码：

import router from '@/router';

router.push({ name: 'Page', params: { id: '1' } });

在上述代码中，我们使用router.push方法进行路由跳转。其中，name为跳转的路由名称，params为传递的参数对象，其内部键与路由路径中的参数名相对应。

接收参数

最后，我们需要在被跳转的页面组件中接收参数，并进行类型检查。

这里有两种方法可以传递参数。一种是通过props，另一种是通过$route。我们分别来看一下这两种传参方法的具体实现：

通过 props 传参

在路由定义时，我们可以通过props选项将路由参数作为组件的属性传递。下面是一个示例代码：

// 路由定义
{
  path: '/page/:id',
  name: 'Page',
  component: Page,
  props: true
}

在组件中，我们可以直接声明这些属性，并通过TypeScript来进行类型检查。下面是一个示例代码：

<script lang="ts">
interface Props {
  id: string;
}

export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup(props: Props) {
    /* ... */
  }
};
</script>

这里我们使用了Vue3新引入的setup函数，用于替代Vue2中的data、computed、methods等钩子函数。通过props对象，我们可以获取到传递过来的参数，并进行类型检查。

通过 $route 传参

另一种传递参数的方式是通过$route。这种方式下，我们可以通过$route.params对象获取到路由参数。下面是一个示例代码：

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

export default defineComponent({
  setup() {
    const id = $route.params.id;
    /* ... */
  }
});
</script>

需要注意的是，在使用$route时，我们需要通过静态类型导入RouteLocationNormalized和RouteParams等路由相关类型，并对参数进行类型检查。

import { defineComponent } from 'vue';
import { RouteLocationNormalized, RouteParams } from 'vue-router';

export default defineComponent({
  setup() {
    const route = $route as RouteLocationNormalized & { params: RouteParams };
    const id = route.params.id;
    /* ... */
  }
});

总结

在Vue3下使用vue-router传递路由参数并进行类型检查，是一种更加安全可靠的方式。通过TypeScript的类型检查，我们可以避免因错误传参导致的运行时异常，提高代码的稳定性。同时，Vue3引入的setup

경로를 정의할 때 경로, 경로 이름 및 구성 요소를 지정해야 합니다. 또한 props: true를 설정하여 구성 요소가 매개 변수를 수신하도록 함으로써 경로 매개 변수를 구성 요소 속성으로 전달할 수도 있습니다. 🎜🎜루트 점프🎜🎜다음은 기본 루트 점프 샘플 코드입니다. 🎜rrreee🎜위 코드에서는 router.push 메소드를 사용하여 루트 점프를 수행합니다. 그 중 name은 점프 경로 이름이고, params는 전달된 매개변수 객체이며, 내부 키는 라우팅 경로의 매개변수 이름에 해당합니다. 🎜🎜매개변수 수신🎜🎜마지막으로 점프된 페이지 구성요소에서 매개변수를 수신하고 유형 검사를 수행해야 합니다. 🎜🎜매개변수를 전달하는 방법에는 두 가지가 있습니다. 하나는 props를 통하고, 다른 하나는 $route를 통합니다. 이 두 가지 매개변수 전달 방법의 구체적인 구현을 각각 살펴보겠습니다. 🎜

props를 통한 매개변수 전달

🎜경로를 정의할 때 props 옵션을 사용하여 라우팅 매개변수를 사용할 수 있습니다. 구성 요소 속성이 전달되기 때문입니다. 다음은 샘플 코드입니다. 🎜rrreee🎜구성 요소에서 이러한 속성을 직접 선언하고 TypeScript를 통해 유형 검사를 수행할 수 있습니다. 다음은 샘플 코드입니다. 🎜rrreee🎜여기에서는 Vue3에 새로 도입된 setup 함수를 사용하여 Vue2의 data 및 computed를 대체합니다. 메서드 및 기타 후크 기능. props 객체를 통해 전달된 매개변수를 얻고 유형 검사를 수행할 수 있습니다. 🎜

$route를 통해 매개변수 전달

🎜매개변수를 전달하는 또 다른 방법은 $route를 사용하는 것입니다. 이런 방식으로 $route.params 객체를 통해 라우팅 매개변수를 얻을 수 있습니다. 다음은 샘플 코드입니다. 🎜rrreee🎜 $route를 사용할 때 정적을 통해 RouteLocationNormalized 및 RouteParams를 가져와야 한다는 점에 유의해야 합니다. 유형 라우팅 관련 유형을 기다리고 매개변수에 대한 유형 검사를 수행합니다. 🎜rrreee🎜요약🎜🎜vue-router를 사용하여 라우팅 매개변수를 전달하고 Vue3에서 유형 검사를 수행하는 것이 더 안전하고 신뢰할 수 있는 방법입니다. TypeScript의 유형 검사를 통해 잘못된 매개변수 전달로 인한 런타임 예외를 방지하고 코드 안정성을 향상시킬 수 있습니다. 동시에 Vue3에서 도입된 setup 기능 및 팩토리 메소드와 같은 새로운 기능을 사용하면 개발 프로세스 중에 라우팅을 더 쉽게 관리하고 처리할 수 있습니다. 🎜

위 내용은 vue3 라우팅에서 매개변수 ts를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!