✔️ Nested routes
상세 페이지 안에 더 복잡하게 엮인 route 들을 설정하고자 했다.
{
path: "/detail/:id(\\d+)",
component: Detail,
props: (route) => {
const blogPost = blogs.find(blog => blog.number === parseInt(route.params.id));
return { blogPost };
},
children: [
{
path: "author",
component: Author
},
{
path: "comment",
component: Comment
}
]
}
children 안에 path 와 component 를 추가로 만들어주고, 해당 Component 파일을 만들어준 다음에 해당 Component 파일이 호출될 위치, 즉 부모 Component 인 Detail.vue 안에
<router-view></router-view>
위 코드를 추가해주었다.
✔️ 페이지 이동
<template>
<div>
<h3 class="mt-4">블로그 목록</h3>
<ul>
<li @click="$router.push('/detail/'+blog.number)" v-for="(blog, i) in blogs" :key="i">{{ blog.title }}</li>
</ul>
</div>
</template>
$router.push 를 이용해서 페이지를 이동시킬 수 있다.
$router.go(-1) 를 이용하면 뒤로 한 페이지 가는 등의 기능도 활용 가능하다.
✔️ Navigation guards
특정 URL 로 접속할 때 예를 들어 마이페이지 같은 경우 로그인을 했는지 확인하는 코드를 실행해야할 때 쓴다.
/mypage 라는 경로로 들어가기 전에 뭔가 검사를 하고 싶다면 beforeEnter 라는 항목을 만들어주면 된다.
const routes = [
{
path: "/mypage",
component: HelloWorld,
beforeEnter: ()=>{
if (로그인했냐 == false) {
return '/login'
}
}
}
];
다만 자바스크립트 변수나 데이터는 콘솔창 코드입력에서 위조가 가능하기 때문에 서버에서도 로그인 검증이 필요하다.
여러 개의 route 에 같은 navigation guard 를 추가할 수 있다.
라우팅 전에 실행하고 싶으면 beforeEach() 혹은 beforeResolve() 를 쓰면 되고,
라우팅 후에 실행하고 싶으면 afterEach() 를 사용할 수 있다.
프로젝트 진행 시 필요할테니 기억해두고 사용해야겠다.
Vue 컴포넌트 안에서도 navigation guard 를 쓸 수 있다.
created() mounted() 와 비슷하게 활용이 가능하다.
beforeRouteEnter(){}
beforeRouteUpdate(){}
이 것들을 lifecycle hook 쓰는 위치에 쓰면 된다.
'컴퓨터 프로그래밍 > Vue.js' 카테고리의 다른 글
[Vue.js] Install Router, Routing, URL Parameter (0) | 2025.02.05 |
---|---|
[Vue.js] Project Settings, Bootstrap (0) | 2025.02.05 |
[Vue.js] Lifecycle 과 hook 을 활용한 데이터 수정 (0) | 2025.02.04 |
[Vue.js] transition, sort 와 spread operator 를 활용한 데이터 정렬 및 보존 (1) | 2025.02.04 |
[Vue.js] input, watch 를 활용해 사용자로부터 데이터 받기 (0) | 2025.02.04 |