Vue-Router /# Hash 삭제 방법

문제

url에 #이 자동으로 라우팅 되어 있어서 #을 제거해 깔끔한 url을 만들고 싶었다.

해결

VueRouter 4 버전 이상부터는, createRouter, createWebHashHistory 함수를 이용하여 라우터를 생성하고, 생성된 Vue App 에서 use 로 사용할 수 있다.

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

  const routes = [
    {
      path: '',
      redirect: { name: 'list' }
    },
    {
      path: '/list', // 리스트 페이지
      name: 'list',
      component: () => import(/* webpackChunkName: "list" */ './views/list')
    },
    // ...
  ]

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

  export default router

history의 모드를 createWebHashHistory() 대신 createWebHistory()로 변경해주면 # (hash)를 제거해줄 수 있다.

참고