new Vue({ el : '#app', router: router })
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>'
}
설정한 URL에 들어갔을 때, <router-view></router-view>
태그를 통해 해당 url의 컴포넌트를 화면상에 뿌려준다.
화면 상에서 해당 url로 바로 접속할 수 있는 태그
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
<a href="/login"></a>
<a href="/main"></a>
(1) 브라우저(클라이언트)에서 서버에 HTTP 요청(request)을 보내면,
(2) 서버의 내부적인 백엔드 로직을 통해 DB에서 데이터를 꺼내온다.
(3) 그 데이터를 HTTP 응답(response)으로 브라우저에 전송