VUE3 항목 개발: Vue-Router를 사용하여 페이지 점프 달성

Vue 3는 대화형 사용자 인터페이스를 구축하는 데 가장 널리 사용되는 JavaScript 프레임워크 중 하나입니다. Vue-Router는 단일 페이지 애플리케이션에서 라우팅 관리를 구현하는 데 사용되는 Vue 프레임워크용 플러그인입니다. 이 글에서는 Vue-Router를 사용하여 Vue 3에서 페이지 점프를 구현하는 방법을 소개합니다.

1. Vue-Router

설치 및 구성하기 전에 Vue 3가 설치되어 있는지 확인하세요. 아직 설치되지 않은 경우 공식 설명서(https://v3.cn.vuejs.org/guide/installation.html)를 참조하여 설치할 수 있습니다.

Vue-Router 설치:

터미널에서 다음 명령을 실행하여 설치합니다.

npm install vue-router@4.0.0-alpha.13

Vue 3에서 Vue-Router 버전은 4.0.0-alpha.13 이상이어야 합니다.

Vue-Router를 설치한 후 Vue 3 애플리케이션에서 Vue-Router를 구성해야 합니다. Routes.js 파일 만들기:

import Home from '@/components/Home'
import About from '@/components/About'

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

이 파일에서는 두 개의 경로를 정의합니다. 하나는 홈 페이지(Home)이고 다른 하나는 About us(About) 페이지입니다.

또한 Vue 3 애플리케이션의 항목 파일(main.js)에서 Vue-Router를 가져와 구성해야 합니다.

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp(App)

app.use(router)

app.mount('#app')

이 파일에서는 createRouter 함수를 통해 라우터 인스턴스를 생성하고 createWebHistory 함수를 사용하여 라우터 모드를 생성합니다. 또한 라우터 인스턴스에 경로를 전달합니다.

Vue 3에서는 app.use() 메소드를 사용하여 Vue-Router 플러그인을 Vue 애플리케이션에 설치합니다. 마지막으로 app.use() 메소드 뒤에 app.mount() 메소드를 배치하면 Vue-Router가 올바르게 설치되고 애플리케이션이 정상적으로 실행될 수 있습니다.

2. 페이지 점프 구현

이제 Vue-Router를 성공적으로 설치하고 구성했으므로 Vue-Router를 사용하여 페이지 점프를 구현하겠습니다.

1. App.vue 파일에 라우팅 링크를 추가합니다.

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

이 템플릿에서는 구성 요소를 사용하여 to 속성을 라우팅 경로로 지정합니다.

2. Home.vue 및 About.vue에 콘텐츠 추가

홈 및 정보 페이지에 대해 두 개의 Vue 구성 요소를 생성하여 페이지가 정상적으로 이동하는지 확인하려면 이러한 구성 요소의 템플릿에 일부 콘텐츠를 추가해야 합니다.

Home.vue:

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page</p>
  </div>
</template>

About.vue:

<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the about page</p>
  </div>
</template>

이제 경로 링크와 페이지 콘텐츠가 성공적으로 설정되었습니다. 이 링크를 사용하여 페이지로 이동할 수 있습니다.

3. 요약

이 기사에서는 Vue-Router를 사용하여 Vue 3에서 페이지 점프를 구현하는 방법을 배웠습니다. 먼저 Vue-Router를 설치하고 구성합니다. 그런 다음 구성요소를 사용하여 경로 링크를 만듭니다. 마지막으로 페이지가 성공적으로 이동하는지 확인하기 위해 구성 요소 템플릿에 콘텐츠를 추가합니다.

Vue-Router에는 동적 라우팅, 중첩 라우팅, 경로 가드 등과 같은 다른 많은 기능이 있습니다. 이러한 기능을 익히면 복잡한 단일 페이지 애플리케이션을 만들고 애플리케이션 내에서 점프 및 탐색을 사용할 수 있습니다.

위 내용은 VUE3 항목 개발: Vue-Router를 사용하여 페이지 점프 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!