Vue의 라우팅 설치 및 사용에 대한 자세한 설명

Vue는 개발을 촉진하는 다양한 도구와 기능을 제공하는 인기 있는 프런트 엔드 개발 프레임워크입니다. 그중 Vue 라우팅은 단일 페이지 애플리케이션을 만들고 라우팅 기능을 구현하는 데 도움이 될 수 있습니다. 이 기사에서는 Vue 라우팅 사용을 소개합니다.

Vue 라우팅 설치

Vue 라우팅을 사용하기 전에 먼저 Vue Router를 설치해야 합니다. npm을 통해 설치할 수 있습니다.

npm install vue-router

Vue 라우터 사용

Vue 프로젝트의 main.js 항목 파일에서 Vue 라우팅을 사용하려면 몇 가지 구성을 만들어야 합니다.

먼저 Vue 및 Vue Router를 가져와야 합니다.

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

Vue.use(VueRouter)

그런 다음 경로를 정의해야 합니다. 예를 들어 여기에서는 Routes.js에 경로를 정의합니다.

import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

export default [
  {
    path: '/',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]

routes.js에서는 먼저 사용해야 하는 구성 요소를 가져온 다음 두 개의 경로 개체가 포함된 경로를 정의합니다. . 각 경로 개체에는 경로와 구성 요소 필드가 포함되어 있습니다.

다음으로 main.js에서 VueRouter 인스턴스를 생성하여 Vue 인스턴스에 전달해야 합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes // 简写
})

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

다음으로 Vue 구성 요소에서 라우팅을 사용합니다. 예를 들어 <router-link>의 경로를 사용하여 다른 경로에 연결할 수 있습니다. <router-link>中使用路由链接到其他路由：

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/bar">Go to Bar</router-link>
  </div>
</template>

在这里，我们使用 <router-link>

this.$router.push('/bar')

여기서는 <router-link> 태그를 사용하여 생성했습니다. 사용자가 링크를 클릭하면 지정된 경로로 이동할 수 있는 경로 링크입니다. to 속성은 링크의 대상 경로를 정의합니다.

또한 Vue Router에서 제공하는 프로그래밍 방식 탐색 기능을 사용하여 페이지로 이동할 수도 있습니다:

this.$router.push({ name: 'User', params: { userId: 1 }})

점프할 때 일부 매개변수를 전달할 수도 있습니다:

rrreee

여기서 $를 사용합니다. router.push 메소드가 전달됩니다. 매개변수로서의 객체. 여기서 name 필드는 대상 경로의 이름을 지정하고 params 필드는 일부 매개변수를 전달합니다.

요약

Vue 라우터는 Vue 프레임워크에서 매우 중요한 구성 요소 중 하나이며 강력한 라우팅 기능을 제공하고 보다 다채로운 단일 페이지 애플리케이션을 만드는 데 도움이 될 수 있습니다. 이 기사에서는 Vue 라우팅의 설치 및 사용에 대해 설명하고 샘플 코드를 통해 Vue Router 사용 방법에 대한 더 깊은 이해를 제공합니다. 모든 사람이 Vue 라우터를 더 잘 사용하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 Vue의 라우팅 설치 및 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!