Vue 프로젝트에서 페이지 간 전환과 매개변수 전송을 위해 라우팅을 사용하는 방법은 무엇입니까?

Vue 프로젝트에서 라우팅을 사용하여 페이지 간을 전환하고 매개변수를 전송하는 방법은 무엇입니까?

Vue 프로젝트에서는 Vue Router를 사용하여 페이지 간을 전환하고 매개변수를 전달할 수 있습니다. Vue Router는 라우팅 기능 구현을 위해 공식적으로 권장되는 플러그인으로 단일 페이지 애플리케이션에서 페이지 전환을 쉽게 구현할 수 있으며 매개변수 전달을 지원합니다.

먼저 Vue 프로젝트에 Vue Router 플러그인을 설치해야 합니다. npm 명령을 통해 설치할 수 있습니다:

npm install vue-router

설치 후 프로젝트 항목 파일(보통 main.js)에 Vue Router를 소개하고 라우팅 인스턴스를 생성합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

위 코드에서는 VueRouter를 다음을 통해 소개합니다. import 문을 작성하고 Vue 인스턴스에 플러그인을 등록합니다. 다음으로 두 개의 라우팅 경로와 해당 구성 요소가 포함된 라우팅 구성 개체 경로를 정의했습니다. 루트 경로 '/'에 액세스하면 Home 구성 요소가 렌더링되고, '/about'에 액세스하면 About 구성 요소가 렌더링됩니다. 마지막으로 VueRouter를 인스턴스화하고 라우팅 구성 객체를 전달하여 라우팅 인스턴스를 생성합니다.

라우팅 인스턴스를 생성한 후 Vue 구성 요소에서 및 를 사용하여 페이지를 전환할 수 있습니다.

는 링크를 생성하는 데 사용되는 Vue Router에서 제공하는 구성 요소로, 링크를 클릭하면 라우팅 점프가 실행됩니다. 구성 요소 템플릿에서 를 사용하여 페이지 간에 전환할 수 있습니다. 예를 들어 홈 구성 요소의 템플릿에서는 다음과 같이 를 사용할 수 있습니다.

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

위 코드에서 "Go to About" 링크를 클릭하면 /about 경로로 이동합니다. .

는 Vue Router에서 제공하는 구성 요소로, 현재 경로에 해당하는 구성 요소를 렌더링하는 데 사용됩니다. Vue 컴포넌트의 템플릿에서 를 사용하여 현재 경로에 해당하는 컴포넌트를 표시할 수 있습니다. 예를 들어 App 구성 요소의 템플릿에서는 다음과 같이 를 사용할 수 있습니다.

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

이런 식으로 '/' 또는 '/about' 경로에 액세스하면 Home 구성 요소와 About 구성 요소가 각각 렌더링됩니다.

Vue Router는 페이지 간 전환 외에도 매개변수 전달도 지원합니다. 라우팅 경로를 정의할 때 경로에 자리 표시자를 사용하여 매개변수를 지정할 수 있습니다. 예를 들어 매개변수가 포함된 라우팅 경로를 정의할 수 있습니다.

{
  path: '/user/:id',
  name: 'user',
  component: User
}

위 코드에서는 /user/:id라는 라우팅 경로를 정의합니다. 여기서 :id는 매개변수입니다. /user/123에 액세스하면 :id가 실제 값으로 대체됩니다. 예를 들어 :id는 123으로 대체됩니다.

Vue 컴포넌트에서는 this.$route.params를 통해 라우팅 매개변수를 얻을 수 있습니다. 예를 들어, User 컴포넌트에서 다음과 같은 라우팅 매개변수를 얻을 수 있습니다:

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出路由参数的值
  }
}

위 코드는 User 컴포넌트가 로드된 후 라우팅 매개변수의 값을 출력합니다.

요약하자면, Vue Router 플러그인을 통해 Vue 프로젝트에서 페이지 간을 쉽게 전환하고 매개변수를 전송할 수 있습니다. 페이지 전환은 와 를 통해 구현되며, 라우팅 경로를 정의하여 매개변수를 전달합니다. Vue Router를 사용하면 프로젝트의 유지 관리성과 확장성이 향상되어 페이지 전환과 매개변수 전송이 더욱 유연하고 편리해집니다.

위 내용은 Vue 프로젝트에서 페이지 간 전환과 매개변수 전송을 위해 라우팅을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!