Vue 정적 라우팅 작성 방법

Vue는 대화형의 동적이며 확장 가능한 웹 애플리케이션을 구축하기 위한 유연한 프레임워크를 제공하는 인기 있는 JavaScript 프레임워크입니다. Vue Router는 Vue.js의 공식 경로 관리 플러그인으로, 구성 요소를 경로에 매핑하여 단일 페이지 애플리케이션(SPA) 개발을 가능하게 합니다.

Vue 라우터는 기록 모드와 해시 모드의 두 가지 라우팅 모드를 지원합니다. 정적 라우팅은 Vue Router의 동적 라우팅을 보완하는 라우팅 유형입니다. 정적 라우팅을 사용하면 URL 경로를 특정 구성 요소에 매핑할 수 있으며 여기에는 동적 매개 변수가 포함되지 않습니다.

그럼 Vue 애플리케이션에서 정적 경로를 정의하는 방법은 무엇입니까?

1. 경로 파일 만들기

먼저 Vue 프로젝트에 라우터 디렉터리를 만들어야 합니다. 이 디렉터리에서 라우팅 구성을 저장할 router.js 파일을 만듭니다.

2. Vue 및 Vue Router 가져오기

파일 시작 부분에서 Vue 및 Vue Router를 가져와야 합니다. 다음은 Vue 및 Vue Router를 가져오는 샘플 코드입니다.

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

Vue.use(VueRouter);

3. 경로 목록 생성

다음으로 모든 정적 경로를 포함하는 라우터 인스턴스를 생성해야 합니다. 일반 경로 목록은 다음과 같습니다.

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  }
]

이 코드에서는 /home, /about 및 /contact의 세 가지 정적 경로를 정의합니다. 각 경로는 정의할 때 가져와야 하는 서로 다른 구성 요소를 가리킵니다.

4. Vue Router 인스턴스 생성

경로 목록을 생성한 후에는 Vue Router를 통해 인스턴스화해야 합니다. 이 작업은 다음 코드로 수행됩니다.

const router = new VueRouter({
  routes
});

이 코드에서는 경로 목록 경로를 매개변수로 지정하고 VueRouter 인스턴스의 라우팅 구성이 생성됩니다.

5. Vue 루트 인스턴스에 경로 인스턴스 삽입

이제 Vue 애플리케이션이 Vue 라우터와 연결되어 있는지 확인해야 합니다. main.js 파일에서 다음과 같이 Vue 루트 인스턴스에 경로 인스턴스를 등록합니다.

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

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

이제 경로가 Vue 애플리케이션에 성공적으로 통합되었습니다. 애플리케이션에서 정적 경로에 액세스해 보면 경로 페이지의 구성 요소가 올바르게 로드된 것을 볼 수 있습니다.

요약

이 글에서는 Vue 애플리케이션에서 정적 경로를 정의하는 방법을 소개합니다. Vue에서 정적 경로를 정의하면 Vue Router 경로 관리 플러그인을 보완하는 특정 구성 요소에 URL 경로를 쉽게 매핑할 수 있습니다. Vue Router에 대해 더 자세히 알고 싶다면 공식 문서를 참고하세요.

위 내용은 Vue 정적 라우팅 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!