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)




    'Vue' 카테고리의 다른 글

    watch  (0) 2023.04.11
    vuex  (0) 2019.02.24
    axios  (0) 2019.02.23
    트랜지션  (0) 2019.02.10
    사용자 정의 디렉티브  (0) 2019.02.09