Vue - Router 모드

Hash

• 도메인/#/~
• 새로고침 해도 서버에 요청이 전송되지 않음
• 서버 setting이 없어도 페이지를 구분해서 만들어낼 수 있다.
• 하지만 하나의 페이지만 구성되고 주소에 불필요한 #이 존재

HTML5(History)

• 도메인 /~
• 단점: 서버에 요청이 전송됨
• 허나 SPA는 index.html을 중심으로 정리하면 됨

HTML5 모드 살펴보기

createWebHashHistory에서 createWebHistory로 변경

import { createRouter, createWebHistory } from "vue-router";
import About from "./About";

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/about",
      component: About,
    },
  ],
});

webpack.config.js에서 output 옵션에 publicPath: "/" 추가하고 npm run build 실행하면 index.html의 src 경로가 절대경로로 변경된다.

output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    clean: true,
  },

/about으로 이동하면 서버에 요청을 하지만 /about에대한 페이지가 존재하지 않는다.
로컬 서버에서는 webpack.config.js에 아래 옵션을 추가하면 서버에 요청을 하고 /index.html 파일로 리다이렉트 시킨다.
실제 서버는 또 다른 옵션을 설정해야 한다. (서버마다 다름)

devServer: {
    historyApiFallback: true
  }