TIL_Vue #3 Router

·2022년 5월 11일
0

Vue

목록 보기
3/3

뷰 라우터

  • 페이지 이동을 위한 Vue.js 라이브러리
  • Vue.js 의 공식 라우터

1️⃣ Vue 객체의 router 속성 정의

new Vue({ el : '#app', router: router })

2️⃣ VueRouter 객체 만들기

  • new VueRouter 객체에는 페이지의 라우팅 정보가 들어간다.
    • routes라는 배열 안에 객체로 페이지마다 지정
  const router = new VueRouter({
	 		//URL에 해시 없애기
            mode: 'history',
            // 페이지의 라우팅 정보
            routes: [
                {
                    //path: 페이지 urL
                    path: '/login',
                    //component: 해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                },
                {
                    path: '/main',
                    component: MainComponent
                }
            ]
        })

//⭐️ VueRouter의 routes 속성에 들어가는 값에는 component,
//Vue 인스턴스에 등록하는 컴포넌트는  components 's' 주의하기

const LoginComponent = {
            template: '<div>login</div>',
        }

        const MainComponent = {
            template: '<div>main</div>'
        }

📌 router-view

설정한 URL에 들어갔을 때, <router-view></router-view> 태그를 통해 해당 url의 컴포넌트를 화면상에 뿌려준다.

화면 상에서 해당 url로 바로 접속할 수 있는 태그

  • 상단의 router-link 태그는 브라우저 상에서 하단의 a 태그와 같이 보여진다.
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
<a href="/login"></a>
<a href="/main"></a>

📌 웹서비스에서 클라이언트와 서버 간의 HTTP 통신 구조 (요청과 응답)

(1) 브라우저(클라이언트)에서 서버에 HTTP 요청(request)을 보내면,
(2) 서버의 내부적인 백엔드 로직을 통해 DB에서 데이터를 꺼내온다.
(3) 그 데이터를 HTTP 응답(response)으로 브라우저에 전송

📘 참고자료

profile
걸음마 개발 분투기

0개의 댓글