Vue에서 라우팅을 수행하는 방법

Vue.js는 단일 페이지 웹 애플리케이션을 구축하는 데 널리 사용되는 프런트 엔드 프레임워크입니다. Vue는 다양한 편리한 도구와 플러그인을 제공하며, 그 중 하나가 애플리케이션 라우팅 관리를 위한 Vue Router입니다. 이 기사에서는 Vue Router를 사용하여 기본 라우팅 시스템을 만드는 방법을 소개합니다.

1. Vue 라우터 설치

Vue 라우터를 사용하려면 먼저 Vue 라우터를 설치해야 합니다. npm이나 Yarn을 사용하여 설치할 수 있습니다.

npm 사용:

npm install vue-router 

yarn 사용:

yarn add vue-router 

설치가 완료된 후 Vue Router를 도입해야 합니다.

import VueRouter from 'vue-router';

2. Vue Router 인스턴스 생성

Vue Router를 설치한 후 Vue Router를 인스턴스화하고 경로를 정의할 Vue Router 인스턴스를 생성해야 합니다. Vue.js에서 구성 요소는 일반적으로 Vue 인스턴스를 사용하여 생성되고 관리됩니다. Vue Router 인스턴스를 생성하기 전에 먼저 Vue 인스턴스를 생성해야 합니다.

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

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由信息定义
  ]
});

위 코드에서는 라우터 인스턴스를 생성하고 경로 옵션에 웹사이트의 라우팅 정보를 정의합니다. Vue Router에서 라우팅 정보는 일련의 라우팅 개체로 구성됩니다. 각 경로 개체는 경로 경로와 해당 경로에 해당하는 페이지 구성 요소를 정의합니다.

3. 라우팅 테이블 생성

라우터 인스턴스에 정의된 경로 속성은 전체 애플리케이션에 대한 라우팅 정보를 저장하는 데 사용됩니다. 이 속성에서는 URL 경로와 해당 보기 구성 요소를 지정하여 라우팅 규칙을 정의합니다.

import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

위 코드에서는 각각 HomePage 및 AboutPage 구성 요소에 매핑되는 / 및 /about이라는 두 가지 라우팅 규칙을 정의합니다.

4. 라우팅 테이블 등록

Vue Router의 인스턴스화 메소드를 호출하여 라우팅 테이블을 Vue 애플리케이션에 등록할 수 있습니다. 이는 Vue Router 인스턴스에서 Vue.use() 메서드를 호출하여 달성할 수 있습니다.

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

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

위 코드에서는 Vue 인스턴스에 Vue Router를 등록하고 인스턴스화합니다. 다음으로 Vue Router 인스턴스를 루트 Vue 인스턴스에 전달합니다.

5. 라우팅 링크 만들기

Vue Router에서는 경로 링크(라우터 링크) 구성 요소를 사용하여 페이지 탐색을 구현할 수 있습니다. 라우터 링크 구성 요소는 실제로 태그를 생성하고 라우팅 정보를 자동으로 바인딩합니다.

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

위 코드에서는 홈페이지와 About 페이지로 이동하기 위해 두 개의 라우터 링크 구성 요소를 사용했습니다. 라우터 링크 태그는 연결해야 하는 요소에 래핑되어야 합니다.

6. 경로 보기 만들기

Vue Router는 현재 경로를 기반으로 보기를 렌더링하기 위해 router-view라는 구성 요소를 제공합니다.

<router-view/>

위 코드에서는 router-view 태그를 사용하여 현재 URL과 일치하는 구성 요소를 적절한 위치에 표시했습니다.

7. 경로 이벤트 처리

Vue Router에서는 경로 탐색이 트리거될 때 이벤트를 처리할 수 있습니다. 이는 Vue Router 인스턴스에서 이벤트를 수신하여 수행할 수 있습니다.

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  // 在路由开始跳转前，进行路由守卫
});

router.afterEach(() => {
  // 跳转完成后
});

위 코드에서는 beforeEach() 및 afterEach() 메서드를 사용하여 라우팅 이벤트를 수신했습니다. beforeEach() 메소드에서는 사용자 로그인 요청 또는 사용자 권한 확인과 같은 라우팅 가드를 수행할 수 있습니다. afterEach() 메소드에서는 페이지 점프 이후에 작업을 수행할 수 있습니다.

요약

이 문서에서는 Vue Router를 사용하여 Vue.js 애플리케이션에서 경로를 만드는 방법을 설명합니다. Vue Router를 설치하고 Vue Router 인스턴스를 생성하고 라우팅 테이블을 정의했습니다. 또한 Vue.js 애플리케이션에서 경로 링크와 경로 보기를 만드는 방법과 경로 이벤트를 처리하는 방법도 다루었습니다. Vue Router를 사용하면 완전한 단일 페이지 웹 애플리케이션을 쉽게 구축할 수 있습니다.

위 내용은 Vue에서 라우팅을 수행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!