Vue 라우터 설치 튜토리얼

Vue는 널리 사용되는 프런트 엔드 개발 프레임워크이며 Vue Router는 Vue 애플리케이션에서 라우팅을 관리하는 데 사용되는 Vue의 일부입니다. Vue Router를 사용하면 애플리케이션에 표시되는 브라우저 URL과 콘텐츠를 제어할 수 있습니다. Vue 애플리케이션에 대한 풍부한 대화형 경험과 페이지 탐색 기능을 제공합니다. 이번 글에서는 Vue Router를 설치하고 사용하는 방법을 설명하겠습니다.

1. Create Vue Project

먼저 Vue CLI를 설치하고 새로운 Vue 프로젝트를 생성해야 합니다. 명령줄에 다음 명령을 입력하세요.

npm install -g @vue/cli
vue create my-project

위 명령은 Vue CLI를 설치하고 이를 사용하여 "my-project"라는 Vue 프로젝트를 생성합니다. 새 프로젝트로 이동하여 명령줄에 다음 명령을 입력하여 애플리케이션을 시작합니다.

cd my-project
npm run serve

2. Install Vue Router

다음으로 Vue Router를 설치해야 합니다. Vue Router를 설치하려면 명령줄에 다음 명령을 입력하세요.

npm install vue-router --save

위 명령은 npm을 통해 Vue Router를 설치하고 프로젝트 종속성에 추가합니다.

3. 경로 만들기

다음으로 몇 가지 경로 및 뷰 구성 요소를 생성하겠습니다. SRC 디렉터리에 "router.js"라는 파일을 만듭니다. 이 파일에서는 새로운 Vue Router 인스턴스를 생성하고 내보냅니다. 간단한 예는 다음과 같습니다.

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

위의 코드는 "Home"이라는 구성 요소를 가리키는 "home"이라는 경로를 생성합니다. Vue Router를 사용하려면 애플리케이션의 진입점에서 경로를 가져와야 합니다. "main.js" 파일을 열고 다음 코드를 추가하세요.

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

Vue.config.productionTip = false

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

위 코드는 "router.js" 파일을 가져와 루트 Vue 인스턴스에 포함시켜 라우팅을 활성화합니다.

4. Creating View Components

다음으로, 다양한 경로를 표시하기 위한 몇 가지 뷰 구성 요소를 만들어야 합니다. "src/views" 폴더에 "Home.vue"라는 파일을 생성합니다. 이 파일에 다음 코드를 추가하세요.

<template>
  <div>
    <h1>Welcome to the Home Page!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

위 코드는 제목만 있고 상호 작용이나 탐색 기능은 없는 간단한 "Home" 구성 요소를 정의합니다. 더 많은 구성 요소를 추가하고 이에 대한 다른 경로를 만들 수 있습니다.

5. 내비게이션 추가

사용자가 다양한 경로와 구성 요소를 탐색할 수 있도록 하려면 애플리케이션에 일부 탐색 요소를 추가해야 합니다. "App.vue" 파일에 다음 코드를 추가합니다.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

위 코드는 두 개의 링크 요소를 추가합니다. 하나는 "Home" 경로를 가리키고 다른 하나는 "About" 경로를 가리킵니다. 또한 현재 URL을 기반으로 다양한 구성 요소를 표시하는 <router-view> 요소도 포함되어 있습니다.

6. 앱 실행

이제 앱을 실행하여 라우팅이 제대로 작동하는지 확인할 수 있습니다. 명령줄에 다음 명령을 입력하세요:

npm run serve

이렇게 하면 브라우저에서 애플리케이션이 시작됩니다. 탐색 요소를 사용하여 다양한 경로와 구성 요소를 탐색하고 URL이 현재 탐색 상태를 어떻게 반영하는지 확인할 수 있습니다.

결론

Vue Router는 복잡한 탐색 기능을 갖춘 대화형 Vue 애플리케이션을 구축하는 데 도움이 되는 매우 유용한 도구입니다. Vue Router를 사용하려면 애플리케이션에 구성 요소를 추가하고 라우팅 및 탐색을 설정해야 합니다. 이 글이 도움이 되었기를 바라며, 행복한 Vue 개발을 기원합니다!

위 내용은 Vue 라우터 설치 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!