vue-router

vue-router

https://ryuzuka.github.io/VUE/tutorial/17_vue-router.html

라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리

• 설치

npm install vue-router --save       // 설치 ( 또는 vue-cli setting )

import VueRouter from 'vue-router'    // import

Vue.use( VueRouter )                      // 모듈 시스템과 함께 사용하려면 Vue.use()를 통해 명시적으로 추가해야 한다.

• VouRouter

// 필수 엘리먼트

<router-link to="/"></router-link>        // 페이지 이동 엘리먼트 ( 화면에서는 <a></a>로 표시됨 )

<router-view></router-view>               // 페이지 표시 엘리먼트 - 해당컴포넌트가 화면에 표시되는 영역

let router = new VueRouter({              // 생성

mode: 'history',              // url의 hash값을 없앤다.

    routes: [                             // 각 라우트는 반드시 컴포넌트와 매핑되어야 한다.

...

]

});

new Vue({

router: router                         

}).$mount( '#router' ) // $mount: el 속성과 동일하게 생성된 인스턴스를 화면에 붙이는 역할을 한다.

• mode: 'history'

history mode : url의 hash( #태그 ) 값을 제외하고 기본 URL 방식을 사용한다.

( vue-router의 기본 모드는 hash mode 이다. )

• .redirect

{ path: '/...', redirect: { name: '' } }    // 이름이 지정된 라우트를 지정할 수도 있다.

{ path: '/*', redirect: '' }                // '/*': 해당 router에 정의 되어있지 않는 path 일때

• 동적 라우트 매칭 ( /: )

 동일한 라우트에 여러 동적 세그먼트를 가질 수 있으며, $route.params 로 접근 할 수 있다.

패턴	일치하는 패스	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

• 매칭 우선순위

 동일한 URL이 여러 라우트와 일치하는 경우가 있다. 이 경우 일치하는 우선 순위는 라우트 정의의 순서에 따라 결정된다. 즉, 경로가 더 먼저 정의 될수록 우선 순위가 높아진다.

• children( 중첩된 라우트 )

<route-view>에 렌더링 된 컴포넌트 내부에는 자신의 중첩 된 <route-view>를 포함 할 수도 있다.

new VueRouter({

routes: [

{ path: '', name: '', component: '',

children: [

{ path: '', name: '', component: '' }

]

},

]

})

• 프로그래밍 방식 네비게이션

router.push( location, onComplete, onAbort ) - onComplete, onAbort 콜백 제공

선언적 방식	프로그래밍 방식
<router-link :to="...">	router.push(...)

// 리터럴 string

router.push('home')

// object

router.push({ path: 'home' })

// 이름을 가지는 라우트

router.push({ name: 'user', params: { userId: 123 }})

// 쿼리와 함께 사용, 결과는 /register?plan=private 입니다.

router.push({ path: 'register', query: { plan: 'private' }})

router.replace( location ) - 새로운 히스토리 항목에 추가하지 않고 탐색

선언적 방식	프로그래밍 방식
<router-link :to="..." replace>	router.replace(...)

router.go(n) - window.history.go(n)와 비슷하게 히스토리 스택에서 앞으로 또는 뒤로 이동

// 한 단계 앞으로 갑니다. history.forward()와 같습니다.

router.go(1)

// 한 단계 뒤로 갑니다. history.back()와 같습니다.

router.go(-1)

// 3 단계 앞으로 갑니다.

router.go(3)

// 지정한 만큼의 기록이 없으면 자동으로 실패 합니다.

router.go(-100)

router.go(100)