Vue.js router

1. Vue랑 Bootstrap 같이 쓸 수 있음

2. vue-router 설치

    npm install vue-router@4

3. router 쓰려면 main.js에서 router 적용

import router from './router'
...
createApp(App).use(router).mount('#app')

4. router 쓰면서 props 전송하려면 App.vue에서 그냥 <router-view> 태그에 전달해주면 됨

<router-view :contents="contents"></router-view>

5. 페이지를 나누고 싶으면 우선 컴포넌트를 만들어야함

6. <router-link>쓰면 버튼처럼 라우팅할 수 있음

7. 라우팅 시 변수를 사용할 수 있다. -> URL 파라미터 사용
    $router 변수로 참조하면됨

// router.js
{
	path: "/detail/:id",
	component: Detail,
}

// Detail.vue
{{ $route.params.id }}

8. URL 파라미터 업그레이드 가능
    정규식 사용 가능
    그때그때 검색해서 사용
    vue-router 4 로 찾아야함

// router.js
{
	path: "/detail/:id//d+";,
	component: Detail,
}

9. 404페이지도 만들어서 쓰기도 함

// router.js
{
	path: "/:anything(.*)",
	component: Home,
}

10. 세부 페이지를 라우팅하려면 Nested routes 를 사용해도 됨
    children 속성 사용

// router.js
{
    path: "/detail/:id",
    component: Detail,
    children: [
        {
            path: "author",
            component: Author,
        }
    ]
  },

// Detail.vue
<router-view></router-view>

11. <router-link> 말고 $router.push() 도 쓸 수 있음

<h5 @click="$router.push('/detail/0')">{{ content.title }}</h5>

12. $router.go()는 브라우저 히스토리를 참조하여 뒤로 가기 등을 구현할 수 있게 해준다.

 

13. 라우터의 장점 -> 뒤로가기가 잘 먹는다