초보자를 위한 Vue.js Vue Router를 사용한 라우팅에 대한 전체 가이드

Vue.js의 라우팅 이해

라우팅은 웹 애플리케이션 개발에 필수적인 기능입니다. Vue.js에서는 Vue Router를 사용하여 페이지 간 탐색을 쉽게 관리할 수 있습니다. 이 게시물에서는 Vue.js 애플리케이션에서 라우팅을 설정하는 방법을 살펴보겠습니다.

Vue 라우터란 무엇인가요?

Vue Router는 Vue.js 애플리케이션에서 라우팅을 관리하기 위한 공식 라이브러리입니다. Vue Router를 사용하면 페이지를 다시 로드하지 않고도 원활한 탐색이 가능한 단일 페이지 애플리케이션(SPA)을 만들 수 있습니다.

Vue 라우터 설치

먼저 Vue Router를 설치해야 합니다. Vue CLI를 사용하는 경우 새 프로젝트를 생성하는 동안 이를 설치하도록 선택할 수 있습니다. 그렇지 않은 경우 다음 명령을 사용하여 설치할 수 있습니다.

npm install vue-router

Vue 라우터 설정

설치 후 Vue Router를 구성해야 합니다. 설정을 위한 기본 단계는 다음과 같습니다.

• 라우터 파일 생성 src 폴더 안에 router.js라는 새 파일을 만듭니다. 'vue'에서 Vue를 가져옵니다. 'vue-router'에서 라우터를 가져옵니다. './views/Home.vue'에서 홈을 가져옵니다. './views/About.vue'에서 정보 가져오기;

Vue.use(Router);

export default new Router({
  mode: 'history', // Using history mode for cleaner URLs
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

• 라우터를 애플리케이션에 통합 다음으로 라우터를 Vue 인스턴스에 통합해야 합니다. 다음과 같이 main.js 파일을 편집합니다.

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

new Vue({
  el: '#app',
  router, // Add the router to the Vue instance
  render: h => h(App),
});

• 라우터 링크 사용 페이지 간을 이동하려면 요소. App.vue 파일에서 이를 사용하는 방법의 예는 다음과 같습니다.

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- Place to display the matched component -->
  </div>
</template>

• 새 페이지 만들기 이제 우리가 사용할 두 가지 구성 요소인 Home.vue와 About.vue를 만들어 보겠습니다.

Home.vue:

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

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

.vue 정보:

<template>
  <div>
    <h1>This is the About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

이제 다음 명령을 사용하여 애플리케이션을 실행할 수 있습니다.

npm run serve

브라우저를 열고 http://localhost:8080으로 이동하세요. 라우팅이 어떻게 작동하는지 보려면 홈 및 정보 링크를 클릭해 보세요!

결론

이번 게시물에서는 Vue Router를 사용하여 Vue.js에서 라우팅의 기본 사항을 다루었습니다. 이 라우팅 기능을 사용하면 보다 대화형이고 사용자 친화적인 애플리케이션을 구축할 수 있습니다. 다음 게시물에서는 경로 매개변수 및 중첩 경로와 같은 Vue Router의 고급 기능을 자세히 알아볼 수 있습니다.

이 게시물이 도움이 되었기를 바랍니다! 궁금하신 점은 댓글로 남겨주세요.

위 내용은 초보자를 위한 Vue.js Vue Router를 사용한 라우팅에 대한 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!