[Udemy Vue 완벽가이드 Section13] 190. 요약

라우팅이 필요한 이유와 라우팅 설정 방법을 배웠고

라우트를 등록하는 방법과 다양하게 구성이 가능하다는 점을 배웠다.

 

redirect, path, name, meta를 설정하고 components프로퍼티로 컴포넌트 여러 개를 로드하고,

children 프로퍼티로 중첩 라우트를 설정하는 법도 배웠다.

 

동적 경로 세그먼트(:)를 사용해서 로드된 컴포넌트에서 라우트 매개변수를 추출하는 방법이나 

로드할 컴포넌트에 라우트 매개변수를 props로 전달하는 방법 등 다양한 내용을 배웠다.

 

내비게이션 가드 사용법과 스크롤 동작 제어도 배웠다.

router-link를 사용한 이동방법과 $router 프로퍼티와 push메서드를 사용하는 프로그래밍 방식 이동도 배웠다.

이동하는 경로를 설명하는 방법도 배웠다. 이렇게 하면 사용자에게 쾌적한 사용자 경험을 제공할 수 있다.

<template>
  <!--생략-->
   <router-link :to="teamMembersLink">View Members</router-link>
  <!--생략-->
</template>

<script>
export default {
 //생략
  computed: {
    teamMembersLink() {
     //문자열 경로 설정
      return '/teams/' + this.id;
      
    // name, params, query 프로퍼티를 추가한 객체 전달
      return {
        name: 'team-members',
        params: { teamId: this.id },
        query: { sort: 'asc' },
      };
    },
  },
};
</script>

 

 

변경 사항이 저장되지 않은 경우, 경고를 통해 데이터를 잃지 않게 해주고

화면에 표시되는 컨텐츠와 연결된 경로를 URL에 반영되도록 할 수 있고

싱글 페이지 애플리케이션일지라도 Vue 애플리케이션에서 공유하고 싶은 바로 그 위치의 URL을 만들어 공유할 수 있도록 하는 등 다양한 방법을 배웠다.

 

좀 더 큰 애플리케이션을 구축한다면, Vue 라우터는 필수로 사용한다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.