Vue2.0 Vue-Router 사용법 및 주의사항

Vue-Router는 Vue.js에서 공식적으로 권장하는 라우팅 관리 라이브러리입니다. Vue.js 2.0 버전에서 완전히 업그레이드되고 최적화되어 더욱 사용하기 쉽고 효율적입니다. Vue-Router는 사용하기 매우 편리하지만, 사용 중에 주의해야 할 몇 가지 문제가 있습니다. 이 글에서는 개발자가 Vue-Router를 더 잘 사용할 수 있도록 Vue-Router의 사용법과 주의사항을 소개합니다.

1. Vue-Router 기본 사용법

Vue-Router는 Vue.js 기반의 플러그인으로, 설치 및 도입이 필요한 제품입니다. npm을 사용하여 Vue-Router를 직접 설치할 수 있습니다.

npm install vue-router

설치가 완료된 후 Vue 애플리케이션에 Vue-Router를 도입합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.use(VueRouter)는 글로벌 라우터 인스턴스를 등록합니다.

Vue 인스턴스에서 라우터 구성:

import Home from './views/Home.vue'
import About from './views/About.vue'

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

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

VueRouter는 기본적으로 Vue 라우팅을 관리하는 데 사용되는 Vue 인스턴스 개체입니다. 위 코드에서는 VueRouter 인스턴스를 생성하고 라우팅 구성 배열(경로)을 전달했습니다. 라우팅 구성 배열에는 애플리케이션의 다양한 경로에 해당하는 구성 요소가 포함되어 있습니다.

템플릿에 router-link 및 router-view 추가:

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

VueRouter에서는 경로를 이동할 때 router-link 구성 요소를 사용해야 하며, 현재 라우팅 구성 요소를 표시하려면 router-view 구성 요소를 사용해야 합니다.

2. 동적 라우팅 및 중첩 라우팅

Vue-Router는 다양한 요구에 따라 구성할 수 있는 동적 라우팅 및 중첩 라우팅을 지원합니다.

1. 동적 라우팅

동적 라우팅은 라우팅 시 변수를 기반으로 하는 라우팅 일치를 나타냅니다. 예:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

이 예에서 /:id는 /user/1, /user /2와 일치할 수 있는 일치 매개변수를 나타냅니다. 및 기타 다른 경로를 선택하고 매개변수를 일치하는 구성 요소에 전달합니다.

2. 중첩 라우팅

중첩 라우팅은 경로에 다른 경로를 삽입하는 것을 의미합니다. 예:

const router = new VueRouter({
  routes: [
    { path: '/user', component: User,
      children: [
        { path: '', component: UserHome },
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

이 예에서는 하위 옵션을 사용하여 중첩 라우팅 구조, 하위 경로 정의 및 상위 경로는 비슷하지만 하위 경로의 경로는 상위 경로 경로 뒤에 추가되어야 합니다.

3. 라우팅 후크 기능

Vue-Router는 라우팅 점프 시 일부 작업을 수행할 수 있는 몇 가지 라우팅 후크 기능을 제공합니다.

1.beforeEach

루트 점프 전에 실행되는 Hook 기능으로, 권한 제어, 점프 차단 등에 사용할 수 있습니다.

router.beforeEach((to, from, next) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
  // 如果需要跳转，必须调用next()。
  next()
})

2.afterEach

루트 점프 이후에 실행되는 Hook 기능은 루트 점프 이후의 동작에 사용될 수 있습니다.

router.afterEach((to, from) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
})

4. 주의사항

1. 라우팅 시에는 router-link 컴포넌트를 사용해야 합니다.

2. 라우팅 시 매개변수를 전달해야 하는 경우 라우팅 매개변수 또는 쿼리 매개변수를 사용할 수 있으며 라우팅 정의에서 콜론(:)을 사용하여 정의해야 합니다.

3. 점프할 때 라우팅 후크 기능에 사용할 수 있는 경로 객체의 메타 속성에 일부 메타데이터를 설정할 수 있습니다.

4. HTML5 기록 모드를 사용하는 경우 서버 측에서 라우팅을 구성하고 일치시켜야 합니다. 구성되지 않은 경우 새로 고칠 때 404 오류 페이지가 반환됩니다.

5. 요약

Vue-Router는 Vue.js 애플리케이션의 라우팅을 쉽게 관리하고 제어할 수 있는 Vue.js의 중요한 플러그인입니다. 이 글에서는 Vue-Router의 기본적인 사용법과 주의사항을 소개합니다. 독자들이 Vue-Router의 사용법과 적용을 더 잘 익힐 수 있기를 바랍니다.

위 내용은 Vue2.0 Vue-Router 사용법 및 주의사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!