Vue Router를 사용한 페이지 전환 방법

소개

Vue.js를 사용한 페이지 전환 방법에 대해 설명합니다.
Vue의 개발 환경의 구축은 끝났지만, 뭔가 모르는 파일 많이 들어가 있고, 어디를 어떻게 해서 개발해 가면 좋은 것인지 모른다! 같은 방향의 기사입니다.

개발 환경의 구축은 이쪽으로부터
초보자용! Vue.js 개발 환경 구축

표시할 페이지 만들기

여기서는 home.vue를 표시해 보겠습니다.
우선 src/components/home.vue를 새롭게 작성합니다.

home.vue

<template>
  <div>
    <p>ようこそ！<br/>ここは私のサイトです</p>
  </div>
</template>
<script>
export default {
  name: 'Home',
}
</script>

라우팅 설정

페이지의 작성이 끝났으므로, 다음은 Router의 설정을 합시다.
src/router/index.js를 열고 새로 만든 home.vue를 라우팅합니다. {} 과 , 를 잊지 않도록 합시다.

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/home' // new add

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },                 // , の追加を忘れずに
    {
      path: '/home',   // new add
      name: 'Home',    // new add
      component: Home  // new add
    }
  ]
})

이제 괜찮습니다. yarn dev에서 시작하여 localhost:8080/home/에 액세스하십시오.

home.vue에서 만든 home 페이지를 볼 수있었습니다.

주소 표시 줄의 #을 지우고 싶습니다.

주소 표시 줄에 #이 있음을 알았습니까? 이것은 지울 수 있습니다. 방금 전 src/router/index.js에 코드를 추가합니다.

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/home'

Vue.use(Router)

export default new Router({
  mode: 'history',  // new add
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

다시 주소 표시줄에 localhost:8080/home/ 을 입력해 봅시다.

#이 더 이상 표시되지 않는 것을 확인했습니다.

요약

여기까지 읽어 주셔서 감사합니다.
잘 했니? 뭔가 불명한 점이 있으면, 코멘트 등 받을 수 있으면 다행입니다.
페이지를 작성해, 그 페이지를 표시하기 위해서 라우팅 설정을 한다. 이것은 Vue에서 개발하는데 필수적인 지식이므로 기억합시다.
덧붙여서 nuxt.js라면, 이러한 라우팅 설정이 불필요하고 파일명이 그대로 URL이 되기 때문에 매우 편합니다. 흥미가 있는 분은 조사해 보세요.