vue router URL 에서 "#" 제거하기 (hashbang)

vue router 는 이름대로 vue 에서 router 를 담당하고 있다.

 

vue-cli 에서 vue-router 를 설치하면 기본적으로

src/router/index.js 파일이 생성되며 세팅이 완료된다.

 

 

Home.vue 와 About.vue 로 이동하는 router 설정이 되어있으며

해당 설정과 같은 syntax 로 원하는 페이지를 등록해주면 된다.

 

import TopMenu from '../components/TopMenu.vue'

const route = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/TopMenu',
    name: 'TopMenu',
    component: TopMenu
  }
]

 

router 를 등록했으니 /TopMenu 로 이동해보자!

 

http://localhost:8080/#/TopMenu 로 이동하면 이동이 잘된다.

 

처음에 # 이 왜 있나 하면서 # 을 지웠더니

http://localhost:8080/TopMenu#/ 로 URL 이 변경되며

Home.vue 로 이동되어 있는 것을 확인할 수 있다.

 

const router = new VueRouter({
  routes,
  mode: "history"
})

 

router 에서 아무 설정을 하지 않아서 그런 것인데

우리가 평소에 보던 익숙한 router 형식으로 URL 을 변경하기 위해 

mode: "history" 를 추가해주자.

 

router mode 는 hash, history, abstract 가 있으며 기본 설정은 hash 모드이다.

 

URL 에서 # 이 보기싫다면 history 모드를 사용해주자.