Vue.js 뷰 라우터 | 네스티드 뷰

728x90

라우팅(routing) : 웹 페이지 간의 이동 방법. 싱글 페이지 애플리케이션(SPA)에서 주로 사용

○ 화면 간의 전환이 매끄러움 <- 깜빡거림 없이 화면 전환 가능

○ 애플리케이션의 사용자 경험 향상 <- 더 빠르게 화면 조작 가능

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

○ 뷰로 만든 페이지 간에 자유롭게 이동 가능

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

<!DOCTYPE html>
<html lang=ko dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue Router Sample</title>
  </head>
  <body>
    <div id="app">
      <h1>뷰 라우터 예제</h1>
      <p>
        <router-link to="/main">Main 컴포넌트로 이동</router-link> <!--URL 값을 변경하는 태그-->
        <router-link to="/login">Login 컴포넌트로 이동</router-link> <!--URL 값을 변경하는 태그-->
      </p>
      <router-view></router-view> <!--URL 값에 따라 갱신되는 화면 영역-->
    </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> <!--라우터 CDN 추가-->

    <script>
      var Main = { template : '<div>main</div>'}; //Main 컴포넌트 정의
      var Login = { template : '<div>login</div>'}; //Login 컴포넌트 정의

      var routes = [ //각 URL에 맞춰 표시할 컴포넌트 지정
        { 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>는 화면 상에서 [Main 컴포넌트로 이동], [Login 컴포넌트로 이동]이라는 <a> 버튼 태그로 변환되어 표시됨.
각 버튼을 클릭하면 to=""에 정의된 텍스트 값이 브라우저 URL 끝에 추가됨.
- 여기에서는 /main과 /login이 추가된다
<router-view>는 갱신된 URL에 해당하는 화면을 보여주는 영역. <router-view>에 나타낼 화면은 <script>에서 정의

Main과 Login 컴포넌트에는 template 속성으로 각 컴포넌트를 구분할 수 있는 정도의 간단한 HTML 코드를 정의함

routes 변수에는 URL값이 /main일 때 Main 컴포넌트를, /login일 때 login 컴포넌트를 표시하도록 정의
router 변수에는 뷰 라우터를 하나 생성, routes를 삽입해 URL에 따라 화면이 전환될 수 있게 정의
new Vue로 새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가하는 코드. $mount()는 el 속성과 같이 인스턴스를 화면에 붙여주는 역할

$mount()는 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할
인스턴스를 생성할 때 el 속성을 넣지 않았더라도 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있음

첫번째 화면에서 Main 컴포넌트로 이동을 누르면 링크에도 /main이 추가되고, Login 컴포넌트로 이동을 누르면 링크에도 /login이 추가됨

file:///E:/doit-vuejs/index_4.html#/login 이런식으로 login앞에 해시(#)값을 없애고 싶으면 히스토리 모드를 사용하면 된다
뷰 라우터 변수 생성 시 mode: 'history' 라고 붙이면 됨

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

상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 구성됨

https://owin2828.github.io/devlog/2020/10/28/web-8.html

<!DOCTYPE html>
<html lang=ko dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue Router Sample</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view> <!--User 컴포넌트가 뿌려질 영역-->
    </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 User = {
        template: `
          <div>
            User component
            <router-view></router-view> //하위컴포넌트가 뿌려질 영역
          </div>
        `
      };
      var UserProfile = {template: '<p>User profile component</p>'}; //1
      var UserPost = {template: '<p>User Post component</p>'}; //1
	  
      //네스티드 라우팅 정의 //2
      var routes = [
        { path : '/user', component: User, children: [
          {
            path: 'posts',
            component: UserPost
          },
          {
            path: 'profile',
            component: UserProfile
          },
        ]}];
	  
      //뷰 라우터 정의 //3
      var router = new VueRouter({
        routes
      });
    
      //뷰 인스턴스에 라우터 추가 //4
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

1 : User, UserPost, UserProfile 컴포넌트의 내용을 각 객체에 정의
2 : routes에 라우터 정보 정의. path 속성에는 네스티드 라우터를 실행하는 기본 URL을 /user로 설정, 상위 컴포넌트는 User 속성으로, children(하위 컴포넌트)은 URL값 /user 다음에 올 URL에 따라 정의됨
UserPost는 /user/posts이고, UserProfile은 /user/profile
3 : 뷰 라우터를 생성해 routes 객체를 정의
4 : 인스턴스를 생성해 라우터 정보 router를 포함시키고 app요소를 인스턴스에 붙여 화면에 나타냄

처음에 실행하면 아무 화면도 안나오는데 URL에 /user를 추가하면 첫 번째

/user/posts를 추가하면 두 번째

/user/profile을 추가하면 세 번째

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

https://velog.io/@park0eun/vue.jsVue-Router

네임드 뷰는같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시

<!DOCTYPE html>
<html lang=ko dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue Router Sample</title>
  </head>
  <body>
    <div id="app">
    <!--라우팅 영역 정의-->
      <router-view name="header"></router-view> <!--1-->
      <router-view></router-view> <!--name이 없는 경우 디폴트-->
      <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>
    //컴포넌트 내용 정의 //2
      var Body = { template: '<div>Body</div>'};
      var Header = {template: '<div>Header</div>'};
      var Footer = {template: '<p>Footer</p>'};

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

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

1 : <router-view>의 name 속성은 아래 components 속성에 정의하는 컴포넌트와 매칭하기 위한 속성. 속성이 없다면 default로 표시됨
2 : Body, Header, Footer 컴포넌트의 내용이 담길 객체 선언. 각 컴포넌트 내용에는 컴포넌트 영역이 구분 될 수 있게 template 속성을 추가함
3 : new VueRouter()로 라우터를 하나 생성하고 라우터 정보를 바로 그 안에 정의함
4 : path는 네임드 뷰가 실행될 URL을 정의하는 속성. 애플리케이션을 실행하면 마주치는 기본 URL 값 '/'을 정의함
5 : components는 앞에서 <router-view>에 정의한 name 속성에 따라 표시될 컴포넌트를 정의하는 속성
6 : 인스턴스를 생성하고 네임드 뷰 정보를 갖고 있는 라우터를 포함

728x90

'FrontEnd' 카테고리의 다른 글

뷰 템플릿 (0)	2022.08.05
Vue.js 뷰 HTTP 통신 (0)	2022.07.28
Vuejs 뷰 컴포넌트 통신 (0)	2022.07.27
Vue.js 컴포넌트 (0)	2022.07.25
Vue.js 기초 \| 라이프사이클 (0)	2022.07.25

ClouD

Vue.js 뷰 라우터 | 네스티드 뷰 | 네임드 뷰

'FrontEnd' 카테고리의 다른 글

티스토리툴바

Vue.js 뷰 라우터 | 네스티드 뷰 | 네임드 뷰

'FrontEnd' 카테고리의 다른 글

'FrontEnd' Related Articles

티스토리툴바