Vue Router (페이지 이동)

검색: vue-router next (next: 최신 버전)

https://next.router.vuejs.org/

Vue Router

 

라우터 설치 (npm install vue-router@4)

브라우저에서 페이지를 관리해주는 용도로 사용되기 때문에 일반의존성으로 설치를 진행한다.

일반의존성: 브라우저가 실행될때 함께 동작하도록 설정할 때 일반의존성으로 설치한다.

 

기존 vue3 템플릿 프로젝트에서 진행하였다.

 

main.js 파일에 아래 코드를 추가

라우터 기능을 관리할 파일의 플러그인을 가져온다.

import router from './routes/index.js'

전체 코드

use(플러그인): 사용자가 import를 통해서 가져온 플러그인을 연결할 때 사용된다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js'

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

 

페이지 관리를 위해 route 폴더를 생성하고 그 안에 index.js 파일을 작성한다.

index.js

// 라우터 패키지 가져오기
import { createRouter, createWebHashHistory} from 'vue-router'
// 라우터를 위해 컴포넌트 가져오기
import Home from './Home'
import About from './About'

// 내보내기
export default createRouter({
  // Hash
  // https://google.com/#/search
  // hash 모드를 사용(중간의 /#/이 추가된다.), 페이지를 새로고침하였을때 404에러를 방지해준다.
  // history 모드도 있지만 간단한 처리를 위해서 hash를 사용하였다.(서버쪽에 설정을 추가해 줘야한다.)
  history: createWebHashHistory(),

  // pages: 페이지를 관리할때 사용되는 옵션
  // https://google.com/
  // url에 입력값에 따라 실행될 컴포넌트 지정
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

 

URL에 따라 보여줄 component 생성

Home.vue

<template>
  <h1>Home!</h1>
</template>

About.vue

<template>
  <h1>About!</h1>
</template>

 

맨처음 보여지는 App.vue 파일 코드 수정

RouterView 영역에 이번에 지정한 라우터된 화면을 보여주게 된다.

<template>
  <RouterView />
  App.vue
</template>

브라우저 확인