Vue.js(5)

쌩 초보의 개발로그·2023년 1월 16일
0

vue.js

목록 보기
5/7
post-thumbnail

라우팅이란?

  • 웹 페이지 간의 이동 방법
  • 현재 웹 앱 형태 중 주로 사용되는 것은 SPA(Single Page Application)
  • 라이팅을 사용하면 화면 간의 전환이 매끄럽고, 화면을 조작할 수 있어 사용자 경험 향상
  • Vue 뿐이 아닌 Augular, React 모두 라이팅을 이용해 화면 전환

Vue Routers

뷰를 이용하여 싱글 페이지 애플리케이션을 제작할 때 유용한 라우팅 라이블리, 뷰 코어 라이브러리와 함께 공식 라이브러리로 지원되고 있다.
설치는 NPM과 CDN 방식 모두 지원한다.

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> // CDN

npm install vue-router --save //NPM

예제

<body>
  <div id='app'>
    <h1>뷰 라우터 예제</h1>
    <p>
      <router-link to="/main">Main 컴포넌트로 이동 </router-link> 
      <router-link to="/login">login 컴포넌트로 이동</router-link> // URL 값을 변경하는 태그
    </p>
    <router-view></router-view> // URL값에 따라 갱신되는 화면 영역

    <script src="https://unpkg.com/vue@3/dist/vue.esm-browser.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
  const Main = {template : '<div>Main</div>'};
  const Login = {template : '<div>Login</div>'};
  // Main, Login 컴포넌트 정의

  const routes = [
    { path : '/main', component : Main},
    { path : '/login', component : Login}
    // 각 URL에 맞춰 표시할 컴포넌트 지정
  ];

  const router = new VueRouter({
    routes // 뷰 라우터 정의
  });

  const app = new Vue({
    router
  }).$mount('#app');
  // 뷰 인스턴스에 라우터 추가
  
</script>
    
</body>
  1. <router-link.>는 화면 상에서 해당 태그가 <a.> 태그로 변환되어 표출되며, to="/main"에 입력한 값이 현재 URL 끝에 추가됩니다. ex) 기존 URL : ~.~/index.html => 클릭시 URL : ~~~/index.html#/login

** 뷰 라우터의 기본 URL 형식은 해시 값을 사용한다. 만약 #이 붙는게 싫다면 히스토리 모드를 사용하면 된다.

하단 코드 중 mode : 'history' 추가 => /login으로 이동

const router = new VueRouter({
mode : 'history',
routes
});
2. 는 갱신된 URL에 해당하는 화면을 보여주는 영역으로 나타낼 화면은 script에서 정의
3. Main과 Login 컴포넌트에는 tempalte 속성으로 각 컴포넌트별 출력할 코드 추가
4. routes 에는 URL 값이 /main 일 경우, Main 컴포넌트를 표시하도록 정의
5. router 에는 뷰 라우터를 하나 생성하고, routes를 삽입해 URL에 따라 화면이 전환될 수 있도록 정의
-> 뷰 라우터는 라우터 CDN을 추가해야 한다.

<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  1. 새로운 인스턴스 생성하고 라우터의 정보가 담긴 router 추가
  • $mount() 란?

앞에서 공부한 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할

인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있음.. 뷰 라우터의 공식 문서는 모두 인스턴스 안에 el을 지정하지 않고 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내

Nested Routers

라우터로 화면을 이동할 때 네스티드 라우터를 이용하여 지정된 하위 컴포넌트를 표시할 수 있다.
이때 컴포넌트의 구조는 가장 큰 상위의 컴포넌트가 하위의 컴포넌트를 포함하는 Parent - child 형태와 같다.

<!-- localhost:5000 -->
<div id="app">
  <router-view></router-view>
</div>
<!-- localhost:5000/home -->
<div>
  <p>Main Component rendered</p>
  <app-header></app-header>
</div>

// 'localhost:5000/home'에 접근하면 Main과 Header 컴포넌트 둘다 표시된다.
{
  path : '/home',
  component: Main,
  children: [
    {
      path: '/',
      component: AppHeader
    },
    {
      path: '/list',
      component: List
    },
  ]
}

Named Views

특정 URL로 이동했을 때 여러 개의 컴포넌트를 동시에 표시할 수 있는 방법이다.

<div id="app">
<router-view name="appHeader"></router-view>
<router-view></router-view>
<router-view name="appFooter"></router-view>
</div>

{
path : '/home',
// Named Router
components: {
  appHeader: AppHeader,
  default: Body,
  appFooter: AppFooter
}
},

Nested Router vs Named Views

  • 특정 URL에 지정된 1개의 컴포넌트가 여러 개의 하위 컴포넌트를 갖는 것을 Nested Router
  • 특정 URL에 여러 개의 컴포넌트를 영역 별로 지정하여 렌더링 하는 것을 Named View
profile
안녕하세요 쌩 초보 장휘주 입니다. 열심히 하는 개발자가 될게요.

0개의 댓글