Vue-Router

Vue-Router 가장많이 사용하는 Vue 라우터 라이브러리

Vue-Router를 사용하기 위해서 미들웨어로 연결해줘야한다.

Vue.use(VueRouter) // 미들웨어

미들웨어로 연결해주면 $Route 로 사용할 수 있게된다.

created() {
	console.log(this.$Route) //라우트객체 출력
}

router-link는 네비게이션을 가능하게 하는 컴포넌트
a태그를 사용해도 되지만 vue-router를 사용할 떄 router-link권고!
(a태그를 사용하면 라우팅될떄 페이지를 다시 그리지만, router-link는 다시 그리지 않는다)

router-link를 사용하면 Vue-Router mode에 따라 링크를 변경해주지 않아도 된다.

// 해시모드
<router-link :to="/#/login">로그인</router-link>

// 히스토리모드
<router-link :to="/login">로그인</router-link>

동적라우트

동적으로 바뀌는 정보에 대해 동적라우트를 적용할 수 있다.

routes: [
        {
            path: '/b/:bid',
        },
        {
        	path: '/c/:cid'
        }
]

$Route.params.bid로 사용할수있다.

중첩라우팅

라우트 안에 또 다른 라우트가 있는경우 중첩라우팅(children)으로 사용할 수 있다.

routes: [
        {
            path: '/b/:bid',
            component: Board,
            children: [{
                path: 'c/:cid',
                component: Card
            }]
        },
]