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 중국어 웹사이트의 기타 관련 기사를 참조하세요!