Vue Router 흐름구조

Vue Router

• 라우트(route)에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려줌 (spa여서 html은 한 페이지인데, url상으론 새로운 html을 보내주는 척 하는것)

1. vue router plugin 설치

$ vue add router

2. App.vue에 router-link를 index.js의 선언된 name으로 바꾸어 줄 수 있다.

<template>
  <div id="app">
    <nav>
    <!-- 이부분 -->
        <!-- 객체임을 알리기 위해 바인드 해줌 -->
      <router-link :to="{ name: 'home' }">Home</router-link> 
        		<!-- 여긴 바꾸기전 -->
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

3. index.js에 경로 import 해줌

import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

4. const routes 에 path, name, component를 설정해줌

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
]

5. views에 vue를 만들어줌

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="moveToHome">To Home</button>
  </div>
</template>

<script>
export default {
  name: 'AboutView', //index.js에 component와 이름을 같게해줌
  methods: {
    moveToHome() {
      this.$router.push({ name: 'home' }) //페이지를 name home으로 바꾸어준다는 뜻
    }
  }

}

</script>

<style>

</style>