Vue.js 라우터

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

위에서 router와 store를 사용하기 위해 use 메소드 안에 넣어줬다.

 

App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

라우터가 있는 프로젝트를 생성하면 다음과 같이 Home과 About 메뉴가 생성되고 그 메뉴를 보면 각각 router-link가 있다. Home은 / , About 은 /about으로 연결되어 있다. 이것을 실제 화면에서 f12 눌러서 소스를 보면 a태그로 나오고 to 속성은 href로 해당 url이 입력되데 나온다. 

연결된 화면들은  <router-view/> 가 적힌 부분이 교체되어서 해당 화면이 나오는거다. vue는 이렇게 서버로부터 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 single page application이다.

 

index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

라우터에 밑에 있는 index.js 를 보면 아까 Home과 About의 링크에 대한 정보가 있다. routes에 경로들이 배열의 형태로 들어갈 수 있다. 각 경로의 name은 동일한 값을 가지면 안되고 유니크해야 한다. component는 어떤 component 를 연결할지에 관련된 정보가 담겨있다.  / 링크는 component 부분을 보면 HomeView로 연결되어 있다. HomeView는 위에  import 부분을 보면 /views/HomeView.vue 에서 가져온거다.  따라서 Home 메뉴를 누르면 HomeView.vue  화면이 나온다. /about 링크는 views/AboutView.vue에 연결되어 About 메뉴를 클릭시 해당 화면으로 간다. 

npm run serve 하고 http://localhost:8080/ 에 들어가면 vue home 화면이 나온다. 개발자 도구를 켜서 network에 들어가고 JS를 보면서 새로고침하면  chunk-vendors.js와 app.js가 나온다. 

~~.vue 의 파일들은 나중에  자바스크립트 파일로 변환되어 컴파일 된다. 라우터에 있는 컴포넌트들은 자바스크립트 소스로 컴파일 되고  모두 app.js 에 들어간다. about  메뉴 정보를 보면 component에 webpackChunkName : "about"이라고 적혀있다. 만약 about 메뉴를 누르고 network의 js를 보면 about.js가 보일거다. 이것은 app.vue 에서 가져온거고 만약 about을 about2로 바꾸면 다음 사진과 같이 바뀌는걸 확인할 수 있다.

 

HomeView.vue 

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

위에 import 부분에 @는 src를 말한다. import해서가져온 HelloWorld.vue를 HelloWorld라는 이름으로 가져오고 이것을 태그의 형태로 <HelloWorld msg="Welcome ~~`">  사용할 수 있다. 이 태그 안에는 msg 속성으로 메세지를 입력했는데 이 메세지는 HelloWorld.vue에 입력이 된다. 

 

HelloWorld.vue에서 msg가 들어가는 부분

  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      ........................

아까 HelloWorld 태그의 msg속성에 있는 메세지는 {{msg}} 에 들어간다.

 

AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>