시그마 삽질==six 시그마

Vue 라우팅 본문

프로그래밍/Javascript

Vue 라우팅

Ethan Matthew Hunt 2020. 5. 2. 06:53

 

Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책  추천드립니다.

구매를 원하시는 분은 요기를 클릭해주세요

해당 글은 책 내용을 바탕으로 작성되었습니다.

 

1. Vue에서 라우팅이란?

 

 

웹페이지간 이동방법

싱글 페이지 애플리케이션에서 주로 사용

(서버에 웹페이지 요청해서 갱시하는게 아니라 미리 해당 페이지들을 받아놓고  페이지 이동시 클라이언트의 라우팅 이용 화면을 갱신하는 패턴 적용한 애플리케이션)

리액트,앵귤러 모두 라우팅 사용해서 화면 전환

 

 

2. 뷰 라우터

 

뷰에서 라우팅 기능을 구현할 수 있도록 지원하는  공식 라이브러리

 

태그 설명
<router-link to="URL값"> 페이지 이동태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL페이지로 이동
<router-view> 페이지 표시 테그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

 

 

 

3. 일반적인 라우터

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router Sample</title>
  </head>
  <body>
    <div id="app">
      <h1>뷰 라우터 예제</h1>
      <p>
        <router-link to="/home">Home 컴포넌트로 이동</router-link>
        <router-link to="/login">Login 컴포넌트로 이동</router-link>
      </p>
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    
    //라우터 CDN 추가!!!!!!!!!!!!!!!!
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    
    <script>
      // 3. Home. Login 컴포넌트 내용 정의
      var Home = { template: '<div>home</div>' };
      var Login = { template: '<div>login</div>' };

      // 4. 각 url에 해당하는 컴포넌트 등록★★★
      var routes = [
        { path: '/home', component: Home },
        { path: '/login', component: Login }
      ];

      // 5. 뷰 라우터 정의★★★
      var router = new VueRouter({
        routes
      });

      // 6. 뷰 라우터를 인스턴스에 등록
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

 

Home 클릭시 홈 로그인 클릭시 로그인 나옴

 

라우터의 # 없애는 방법

히스토리 모드를 활용하면됨

      var router = new VueRouter({
      mode: 'history',
        routes
      });

 

 

4. 네스티드 라우터

 

한화면에 상위 컴포넌트 1개에 하위 컴포넌트 1개 포함하는 구조

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Nested Router</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      var Animal = {
        template: `
          <div>
            Animal Component
            <router-view></router-view>
          </div>
        `
      };
      var AnimalCat = { template: '<p>Animal Cat Component</p>' };
      var AnimalDog = { template: '<p>Animal dog Component</p>' };

      var routes = [
        {
          path: '/animal',
          component: Animal,
          children: [
            {
              path: 'cat',
              component: AnimalCat
            },
			{
              path: 'dog',
              component: AnimalDog
            },
          ]
        }
      ];

      var router = new VueRouter({
        routes
      });

      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

 

~index.html#/animal 주소로 url 접속시

~index.html#/animal/cat 주소로 url  접속시

~index.html#/animal/dog 주소로 url  접속시

 

 

 

5. 네임드 뷰

 

특정페이지 이동시 같은레벨의 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Named View Sample</title>
  </head>
  <body>
    <div id="app">
      <router-view name="header"></router-view> <-- name 속성은 원하는거 사용-->
      <router-view></router-view>  <-- name이 없을 경우 default임 -->
      <router-view name="footer"></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      var Body = { template: '<div>This is Body</div>' };
      var Header = { template: '<div>This is Header</div>' };
      var Footer = { template: '<div>This is Footer</div>' };

      var router = new VueRouter({
        routes: [
          {
            path: '/',
            components: { //<router-view>의 name 속성과 컴포넌트 연결
              default: Body,  
              header: Header,
              footer: Footer
            }
          }
        ]
      })

      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

 

'프로그래밍 > Javascript' 카테고리의 다른 글

vue 싱글 파일 컴포넌트 체계  (0) 2020.05.02
Vue HTTP 통신  (0) 2020.05.02
vue의 생명주기  (0) 2020.05.02
Vue란 무엇인가?  (0) 2020.05.02
Vuex  (0) 2020.04.19
'프로그래밍/Javascript' Related Articles more
Comments