Vue에서 새 페이지를 여는 방법

Vue는 최신 웹 애플리케이션 개발에 널리 사용되는 JavaScript 프레임워크입니다. Vue는 유연하고 쉽게 확장 가능하도록 설계되어 단일 페이지 애플리케이션을 구축하는 데 이상적입니다. 그러나 일부 초보자의 경우 Vue에서 페이지를 여는 것이 다소 어려울 수 있습니다. 이 글에서는 Vue에서 새 페이지를 여는 방법과 페이지를 열 때 발생할 수 있는 몇 가지 문제에 대해 설명합니다.

먼저 Vue에서 새 페이지를 여는 기본 방법을 살펴보겠습니다. 새 페이지를 열려면 Vue에서 제공하는 라우팅 기능을 사용해야 합니다. 라우팅은 Vue에서 중요한 개념이며, URL에 매핑되는 구성 요소입니다. 라우팅을 사용하면 애플리케이션 내에서 탐색이 매우 쉬워집니다.

Vue 라우팅을 사용하려면 Vue Router가 설치되어 있는지 확인하세요. Vue Router는 아래와 같이 npm 또는 Yarn을 사용하여 설치할 수 있습니다.

npm install vue-router

또는

yarn add vue-router

설치가 완료된 후 Vue Router를 사용할 수 있습니다. 먼저 아래와 같이 Vue 애플리케이션에서 라우터 인스턴스를 생성해야 합니다.

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

Vue.use(VueRouter)

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

이 예에서는 라우터 인스턴스가 생성되고 두 개의 경로가 정의됩니다. 하나는 홈페이지용이고 다른 하나는 정보 페이지용입니다. 각 경로에는 URL 경로(path), 이름(name) 및 구성 요소(composite)가 있습니다. 이 경로는 Vue 애플리케이션에서 사용됩니다.

다음으로 Vue 애플리케이션에서 생성된 라우터 인스턴스를 사용해야 합니다. 아래와 같이 라우터 속성을 Vue 애플리케이션의 루트 인스턴스에서 사용할 수 있습니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

이제 기본 라우팅 구성이 생성되었으므로 다음 단계는 Vue에서 새 페이지를 여는 것입니다.

Vue에서 새 페이지를 열려면 Vue Router에서 제공하는 v-router-link 명령을 사용해야 합니다. v-router-link 지시문은 Vue에서 사용자가 한 페이지에서 다른 페이지로 이동할 수 있는 클릭 가능한 링크를 생성하는 데 사용됩니다.

예를 들어 "정보" 페이지에 대한 링크가 포함된 Vue 탐색 메뉴를 만들려면 다음 코드를 사용할 수 있습니다.

<router-link to="/about">About</router-link>

이 예에서는 v-router-link 지시문을 사용하여 링크를 만듭니다. "정보" 페이지 링크로 이동합니다. to 속성은 링크의 URL 경로를 지정합니다. 사용자가 링크를 클릭하면 Vue Router는 이 URL 경로에 매핑된 구성 요소로 이동합니다.

이제 Vue에서 새 페이지를 여는 기본 방법을 알았으니 페이지를 열 때 발생할 수 있는 몇 가지 문제를 살펴보겠습니다.

첫 번째 질문은 새 페이지에서 URL 매개변수에 액세스하는 방법입니다. Vue에서 URL 매개변수에 액세스하려면 $route 객체를 사용할 수 있습니다. $route 객체에는 URL 매개변수 및 쿼리 매개변수를 포함하여 현재 경로에 대한 정보가 포함되어 있습니다. 예를 들어 매개변수는 다음 URL 경로에서 액세스됩니다.

/about/:id

ID 매개변수는 다음 코드를 사용하여 Vue에서 액세스할 수 있습니다.

this.$route.params.id

두 번째 질문은 Vue에서 외부 링크를 여는 방법입니다. Vue에서 외부 링크를 열려면 Vue Router에서 제공하는 v-router-link 지시문의 target 속성을 사용할 수 있습니다. 예를 들어 다음 Vrouter-link 지시문에서 외부 링크를 엽니다.

<router-link to="https://www.example.com" target="_blank">Example</router-link>

이 예에서는 target 속성을 사용하여 새 창을 열고 외부 URL에 연결합니다.

이 기사에서는 Vue에서 새 페이지를 여는 방법에 대해 논의했습니다. Vue Router를 사용하여 기본 라우팅 구성을 생성하는 방법, v-router-link 지시문을 사용하여 클릭 가능한 링크를 생성하는 방법, 새 페이지에서 URL 매개변수에 액세스하는 방법, Vue에서 외부 링크를 여는 방법을 배웠습니다. 이 팁은 당신이 마스터 Vue 개발자가 되는 데 도움이 될 것입니다.

위 내용은 Vue에서 새 페이지를 여는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!