vue에서 두 경로 사이를 이동하는 방법(방법에 대한 간략한 분석)

Vue는 구성 요소화된 웹 애플리케이션을 구축하여 개발 효율성을 향상시킬 수 있는 매우 인기 있는 JavaScript 프레임워크입니다. Vue.js의 라우팅 시스템을 사용하면 서로 다른 페이지 사이를 탐색할 수 있습니다. 이 기사에서는 두 Vue 경로 사이를 이동하는 방법을 소개합니다.

Vue의 라우팅은 vue-router 플러그인을 통해 완료됩니다. vue-router 플러그인은 애플리케이션의 경로를 정의하고 관리할 수 있는 라우터 인스턴스를 제공합니다. vue-router를 사용하려면 Vue 애플리케이션에 이를 도입해야 합니다.

경로 정의

먼저 Vue 애플리케이션에서 경로를 정의하세요. 경로를 정의하는 방법은 Vue Router의 경로 매핑을 정의하는 것입니다. URL 경로와 Vue 구성 요소 간의 매핑을 지정합니다. 경로 매핑은 vue-router 인스턴스의 Route 속성을 통해 정의할 수 있습니다.

예를 들어 "Home"이라는 Vue 구성 요소를 만듭니다:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

그런 다음 라우팅 맵에서 홈 구성 요소에 대한 홈페이지 경로를 가리키도록 경로를 정의할 수 있습니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home }
]

const router = new VueRouter({
  routes
})

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

위 코드에서 먼저 가져오기를 사용합니다. Vue 및 Vue Router 라이브러리와 Home 구성 요소를 가져오는 명령문입니다. 다음으로 Vue.use() 호출을 통해 Vue 라우터를 Vue 애플리케이션에 등록합니다. 그런 다음 URL 경로를 정의하는 경로 항목과 해당 경로의 Vue 구성 요소를 지정하는 구성 요소 항목이 포함된 경로 맵 경로를 정의합니다. 마지막으로 라우터 인스턴스를 생성하여 Vue 인스턴스에 전달합니다.

루트 점프 사용

루트 맵을 만들고 루트를 정의했으므로 다음 단계는 루트 점프를 수행하는 방법입니다. Vue Router는 선언적 탐색과 프로그래밍적 탐색이라는 두 가지 유형의 점프를 제공합니다.

선언적 탐색

선언적 탐색은 Vue 구성 요소의 구성 요소를 사용하여 다른 경로로 이동하는 것을 의미합니다. 예를 들어 Home 구성 요소의 태그를 사용하여 About 구성 요소로 이동합니다.

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

여기에서는 to 속성을 사용하여 점프 대상 경로에 대한 경로를 지정합니다. Vue는 to 속성을 다른 경로에 대한 전체 경로로 확인합니다.

프로그래밍 방식 탐색

프로그래밍 방식 탐색은 Vue Router 인스턴스의 $router 메서드를 사용하여 경로 간을 이동합니다. 예를 들어, Home 구성 요소에서 $router.push 메서드를 사용하여 About 구성 요소로 이동할 수 있습니다.

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="gotoAbout">About Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    gotoAbout () {
      this.$router.push('/about')
    }
  }
}
</script>

여기서 $router.push 메서드를 사용하여 경로를 이동하는 데 사용되는 gotoAbout 메서드를 정의합니다. 대상 경로 .

요약

위의 두 가지 방법을 통해 두 Vue 경로 사이의 점프를 실현할 수 있습니다. 선언적 탐색과 프로그래밍 방식 탐색은 모두 Vue Router에서 일반적으로 사용되는 라우팅 점프 방법입니다. 실제 개발에서는 특정 시나리오에 따라 다양한 방법을 선택할 수 있습니다.

위 내용은 vue에서 두 경로 사이를 이동하는 방법(방법에 대한 간략한 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!