[vue] vue3 히스토리 모드 <-> 해시모드 변경

프로젝트 생성 당시 router를 히스토리 모드로 생성하였으나 해시모드로 사용해야 하는 상황에

수정 방법을 찾아보았으나 vue2 기준의 내용밖에 없어 코드 공유차 포스팅 합니다.

 

히스토리 모드로 프로젝트 생성 시 아래와 같이 createWebHistory로 생성됩니다.

// src/router/index.js

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

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

export default router

 

그러나 해시 모드로 생성 할 경우 아래와 같이 createWebHashHistory로 생성됩니다.

// src/router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
import HomeView from '../views/HomeView.vue'

const routes = [
  ... 생략 ...
];

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

export default router;

 

해당 부분만 바꿔주면 서버 재시작 할 필요 없이 바로 적용 가능합니다.