상세 컨텐츠

본문 제목

[Vue.js] 라우터 통신 : 라우터 기본, 네스티드 라우터, 네임드 뷰

Web/FrontEnd

by 감싹이 2022. 11. 17. 08:12

본문

#️⃣ 라우터 기본

라우팅 : 웹페이지 간 이동방법. 싱글 페이지 애플리케이션에서 사용.

라우팅을 사용하면 화면 간 전환이 매끄러울 뿐 아니라 애플리케이션의 사용자 경험을 향상 시킨다. 페이지가 바뀔 때 나타나는 깜빡거림이 사라지기 때문이다. 뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있다.

 

뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원한다. 뷰 라우터를 사용하면 자유로운 페이지 이동이 가능해진다. 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Router Sample</title>
</head>
<body>
  <div id="app">
    <h1>Vue 라우터 예제</h1>
    <p>
      <router-link to="/main">메인 컴포넌트로 이동</router-link>
      <router-link to="/login">로그인 컴포넌트로 이동</router-link>
    </p>
    <router-view></router-view>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

  <script>
    var Main = {template: '<div>main</div>'}
    var Login = {template: '<div>login</div>'}

    var routes = [
      {path: '/main', component: Main},
      {path: '/login', component: Login}
    ]

    var router = new VueRouter({
      routes
    })

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

< router-link> 화면상에서 <a>태그로 변환되어 표시. 각 버튼을 클릭하면 to=" "에 정의된 텍스트 값이 브라우저 URL 끝에 추가됨

< router-view> 갱신된 URL에 해당하는 화면을 보여주는 영역. script에서 정의

- routes : URL 값에 따라 표시될 컴포넌트 지정
- new VueRouter : 뷰 라우터에 routes 연결
- new Vue({ }).$mount() : 새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가하는 코드

$mount() API el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다. el 속성을 넣지 않더라도 생성하고 나서 $mount를 사용하여 인스턴스를 강제로 화면에 붙일 수 있다.

 

Q. URL에 표시되는 #을 없애고 싶어요

뷰 라우터의 기본 URL 형식은 해시값을 사용한다.

해시값을 없애고 싶다면 히스토리모드를 활용하면 된다.

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

#️⃣ 네스티드 라우터

네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상이 컴포넌트를 화면에 나타낼 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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.7.13/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

  <script>
    var User = {
      template:`
      <div>
        User Component
        <router-view></router-view>
      </div>
      `
    }

    var UserProfile = {
      template: '<p>User Profile Component</p>'
    }

    var UserPost = {
      template: '<p>User Post Component</p>'
    }

    var routes = [
      {
        path: '/user',
        component: User,
        children: [
          {
            path: 'posts',
            component: UserPost
          },
          {
            path: 'profile',
            component: UserProfile
          }
        ]
      }
    ]

    var router = new VueRouter({
      routes
    })

    var app = new Vue({
      router
    }).$mount('#app')

  </script>

</body>
</html>

 

화면을 구성하는 컴포넌트 수가 적을 때는 네스티드 라우터가 유용하지만 한 번에 많은 컴포넌트를 표시하는 데는 한계가 있다

 

=> 네임드 뷰로 해결

 

#️⃣ 네임드 뷰

네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.

Header, Body, Footer 구현 가능

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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>
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/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: {
            default: Body,
            header: Header,
            footer: Footer
          }
        }
      ]
    })

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

네임드 뷰를 활용하면 특정 페이지로 이동 했을 때 해당 URL에 맞춰 여러 개의 컴포넌트를 한 번에 표시할 수 있다.

 

📌 name 속성을 지정하지 않았을 때의 기본 컴포넌트는 default로 접근
저작자표시 (새창열림)

'Web > FrontEnd' 카테고리의 다른 글

Using React Reference (by. 코딩애플)  (0) 2023.08.06
[코딩애플 / React 리액트 기초부터 쇼핑몰 프로젝트까지!] 모달창 만들기(컴포넌트, fragment 문법) / 제목 누르면 모달 보여주기 ( 삼항연산자 ) / map 사용  (0) 2023.03.27
[ 코딩애플 / React 리액트 기초부터 쇼핑몰 프로젝트까지! ] Part1. 리액트 프로젝트 설치 / 레이아웃 JSX 문법 / state / 버튼 기능 개발 / array, object state 변경  (1) 2023.03.26
[Vue.js] 상위 컴포넌트, 하위 컴포넌트, 같은 레벨 컴포넌트  (0) 2022.11.16
[Vue.js] 전역 컴포넌트, 지역 컴포넌트  (0) 2022.11.14

관련글 더보기

티스토리툴바