Vue3 에서 라우터 설정

Vue3

Vue3 Router 의 경우, vue-router 가 아닌, vue-router@next 를 설치해주어야 합니다.

yarn add vue-router@next

 

router 폴더 밑에 index.js 를 생성합니다. 아래와 같이 기본 셋팅을 해줍니다.

import { createWebHistory, createRouter } from 'vue-router'

function getComponent(component) {
  return () => import(`../components/${component}.vue`)
}

const routes = [
  {
    path: '/',
    name: 'Main',
    component: getComponent('MainComponent')
  },
  // 404 페이지
  {
    path: '/404',
    name: 'notFound',
    component: getComponent('NotFound')
  },
  // 찾을 수 없는 모든 경로
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404'
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

hisory 의 경우, createWebHistory() 를 사용해줍시다. createWebHashHistory() 의 경우, SEO 에 좋지 않기 때문에 권장하지 않는다. 하지만, 서버측 대응이 필요가 없음.
createWebHistory() 는 SPA 이기 때문에 url로 다이렉트 접속시 404 가 나올 수 있어 서버측에서 대응을 해주어야함.

 

main.js 에서 사용해줍니다.

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

import 'purecss'
import './assets/main.css'

const app = createApp(App)

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