vue의 버튼을 통해 새 페이지를 전달하는 방법

Vue에서는 라우팅을 통해 페이지 간을 이동할 수 있습니다. 이 글에서는 Vue의 버튼을 사용하여 새 페이지로 전달하는 방법을 살펴보겠습니다. Vue의 공식 라우터 플러그인인 Vue Router를 사용하겠습니다.

Vue Router는 Vue.js의 공식 라우터입니다. 이를 통해 일부 URL을 Vue 구성 요소에 매핑하기 위한 라우팅 테이블을 설정할 수 있습니다. 이렇게 하면 URL을 통해 다른 페이지로 이동할 수 있습니다. 먼저 Vue Router를 설치해 보겠습니다.

Vue Router 설치

Vue Router를 사용하려면 먼저 Vue Router를 설치해야 합니다. npm이나 Yarn을 사용하여 설치할 수 있습니다.

npm 사용:

npm install vue-router

yarn 사용:

yarn add vue-router

Vue 프로젝트에서 Vue Router 사용하기

Vue Router를 설치한 후 Vue 프로젝트에서 사용해야 합니다. Vue 프로젝트에서 Vue Router를 사용하려면 main.js에 Vue Router를 도입하고 사용해야 합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // ...
  ]
})

new Vue({
  router,
  // ...
}).$mount('#app')

위 코드에서는 main.js에 Vue와 Vue Router를 먼저 소개했습니다. 그런 다음 Vue.use(VueRouter)를 통해 Vue Router를 사용하도록 지시합니다. 다음으로 VueRouter 인스턴스를 생성하고 여기에 몇 가지 라우팅 규칙을 전달합니다. 마지막으로 이 VueRouter 인스턴스를 Vue 인스턴스의 라우터 옵션에 전달합니다. 이러한 방식으로 Vue Router는 우리 애플리케이션에서 작동할 수 있습니다.

경로 설정

Vue Router에서는 routes 속성을 ​​사용하여 경로를 설정할 수 있습니다. routes 属性来设置路由。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

以上代码中，我们在 routes 属性中设置了两个路径，'/'和'/about'。当我们访问这些路径时，Vue Router将渲染与路径对应的组件。

传递参数

在Vue Router中，我们可以通过URL参数来传递数据。我们可以在URL中添加参数，这些参数将被传递给我们定义的组件。

例如，我们要传递一个名为 id 的参数，我们可以像这样设置路由：

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
})

在这个路由中，我们使用 ':id' 设置了参数。这个参数将被传递给我们的组件 User。

在User组件中，我们可以通过 $route.params.id 来访问这个参数。例如：

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

以上代码中，我们使用 $route.params.id 访问了我们传递过来的参数。

前进和后退

Vue Router也支持前进和后退的功能。我们可以使用 $router.go() 方法来实现前进和后退。例如：

<template>
  <div>
    <button @click="$router.go(-1)">Back</button>
    <button @click="$router.go(1)">Foward</button>
  </div>
</template>

以上代码中，我们创建了两个按钮。一个用来后退，一个用来前进。当点击这些按钮时，我们调用 $router.go()rrreee

위 코드에서는 routes 속성에 '/'와 '/about'이라는 두 개의 경로를 설정했습니다. 이러한 경로에 액세스하면 Vue Router는 경로에 해당하는 구성 요소를 렌더링합니다.

매개변수 전달

Vue Router에서는 URL 매개변수를 통해 데이터를 전달할 수 있습니다. URL에 매개변수를 추가할 수 있으며 이러한 매개변수는 우리가 정의한 구성요소에 전달됩니다. 🎜🎜예를 들어 id라는 매개변수를 전달하려는 경우 다음과 같이 경로를 설정할 수 있습니다. 🎜rrreee🎜이 경로에서는 ':id'를 사용하여 매개변수를 설정했습니다. 이 매개변수는 구성요소 User에 전달됩니다. 🎜🎜User 구성 요소에서 $route.params.id를 통해 이 매개변수에 액세스할 수 있습니다. 예: 🎜rrreee🎜위 코드에서는 $route.params.id를 사용하여 전달한 매개변수에 액세스합니다. 🎜🎜앞으로 및 뒤로🎜🎜Vue 라우터는 앞으로 및 뒤로 기능도 지원합니다. $router.go() 메소드를 사용하여 순방향 및 역방향을 달성할 수 있습니다. 예: 🎜rrreee🎜위 코드에서는 두 개의 버튼을 만들었습니다. 하나는 뒤로 가기 위한 것이고 하나는 앞으로 가기 위한 것입니다. 이 버튼을 클릭하면 $router.go() 메서드를 호출하여 숫자 매개변수를 전달합니다. 이 숫자는 앞으로 또는 뒤로 이동하려는 단계 수를 나타냅니다. 음수는 뒤로 가는 것을 의미하고, 양수는 앞으로 가는 것을 의미합니다. 🎜🎜요약🎜🎜이 기사에서는 Vue Router를 사용하여 경로를 설정하고, 매개변수를 전달하고, 앞으로 및 뒤로 이동하는 방법을 배웠습니다. 이러한 방법을 통해 Vue 프로젝트의 페이지 사이를 쉽게 이동할 수 있습니다. 🎜

위 내용은 vue의 버튼을 통해 새 페이지를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!