컴퓨터 프로그래밍/Vue.js

[Vue.js] Nested routes, $router.push, Navigation guards

한33 2025. 2. 9. 17:50

✔️ 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 쓰는 위치에 쓰면 된다.