Vue.js 라우터

Inseok Park·2022년 6월 21일
0

Vue Lv1

목록 보기
6/11
post-thumbnail

Vue Router

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때
사용하는 라이브러리입니다.

<div id="app">
  <div>
    <!-- router-link는 해당페이지로 이동이 가능하게 한다. a태그로 변환되어 나옴.-->
    <router-link to="/login">Login</router-link>
    <router-link to="/main">Main</router-link>
  </div>
  <!--main or login component를 화면에 보여줌-->
  <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script>
  const LoginComponent = {
    template: '<div>login</div>'
  }
  const MainComponent = {
    template: '<div>main</div>'
  }

  const router = new VueRouter({
    // url에 #를 지워주는 히스토리모드
    mode:'history',
    // 페이지의 라우팅 정보(routes)
    // 배열안에 컴포넌트당 1개의 객체를 추가함. [{},{}]
    routes: [
      // 로그인 페이지 정보
      {
        // 페이지의 url
        path: '/login',
        // 해당 url에서 표시될 컴포넌트
        component: LoginComponent
      },
      // 메인 페이지 정보
      {
        path: '/main',
        component: MainComponent
      }
    ]
  });

  new Vue({
    el: '#app',
    router: router //es6문법에 따라 속성과 값이 같아 router로 축약가능. 
  });
</script>

뷰 라우터 mode:'history' 사용시 유의사항
히스토리 모드

뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법
라우터의 네이베이션 가드

0개의 댓글