2. Vue 까먹었음 다시 보는 기초문법 - WastepaperBasket/Vue.js GitHub Wiki
- 페이지를 여러개 만들고 싶을 때 라우터라는걸 사용
- 설치 !!
npm install vue-router@4
- scr폴더 안에 router.js 파일 제작
import { createWebHistory, createRouter } from "vue-router";
const routes = [
{
path: "/경로",
component: import해온 컴포넌트,
},
{
path: '/:anything(.*)',
name: 'NotFound',
component: () => import('@/views/NotFoundPage.vue') // 동적 import
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
- main.js
import router from './router'
createApp(App).use(router).mount('#app')
- 그 다음 어디 보여줄지??
원하는 곳에
<router-view></router-view> 를 추가해줍니다.
그럼 저 부분에 보입니다
a태그와 비슷한 라우트는 <router-Link to="/블라블라"></router-view>
- 라우트를 만들고 싶으면
(router.js)
import List from './components/List.vue';
const routes = [
{
path: '/list',
component: List,
}
];
(router.js)
import List from './components/List.vue';
const routes = [
{
path: '/list',
component: List,
},
{
path: '/경로',
component: 위에서 import 해온 컴포넌트
}
];
하나 더 추가 ;;
-
props 전송은 ? <router-view :블로그글="블로그글">
-
페이지 이동링크 ? 이동하기
(router.js)
const routes = [
{
path: '/detail/:id',
component: Detail,
},
];
{{ $route.params.파라미터명 }}
특정 페이지 내에서 또 라우트를 나누는 경우인데 이걸 nested routes라고 합니다.
UI만드는 법으로 모달창식으로 만들어도 똑같이 구현가능하긴 한데
저렇게 다른 URL로 나눠두면 ??
뒤로가기 앞으로가기 버튼이 동작함
const routes = [
{
path : '/detail/:id',
component : Detail,
children : [
{ path : 'author', component : Author },
{ path : 'comment', component : Comment },
]
}
]
DetailView로 돌아가서
<router-view></router-view>
쓰면 끝 !
list.vue에 글제목 누르면 detail페이지 이동하려면
<div v-for="(블로그글, i) in 블로그글" :key="블로그글">
<h5 @click="$router.push(`/detail/${i}`)">{{ 블로그글.title }}</h5>
이런식!
$route는 현재경로
$router는 페이지 이동관련 기능
named views 여러개 컴포넌트 보여줄때,
path: "/Home",
component:{
Home: Home,
Comment : Comment
}
},
라우터관련 문법 에러들은 터미널에 표기되지 않고
크롬 개발자도구 콘솔창에 쪼그만하게 warning으로 표기됩니다.
(warning이라서 사이트가 멈추지 않습니다)
그래서 코드의 라우터관련 에러들은 콘솔창에서 확인하고 수정해보고 하시길 바랍니다.
-
$router.push('/detail/0')
-
$router.go(-1) 뒤로가기 ;
[자세한 사항] (https://router.vuejs.org/)