URL뒤에 붙는 #

localhost:8080 을 치는데 계속 뒤에 /#/ 이 따라 붙는거당.....

메뉴를 클릭해도 localhost:8080/#/menu  로 넘어가서 중간에 #이 되게 거슬려서 없애는 방법을 찾다가!!

 

 

1. src/router/index.js

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
export default router

Vue.js는 mode설정을 하지않으면 기본적으로 hash모드로 동작한다.

(이 경우 ’http://example.com/#/’ 과 같이 URL 뒤에 #이 붙는다.)

 

 

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
export default router

이 mode를 history로 바꿔주면 URL뒤에 #이 사라진다!!!!!!!!!!! 대박

 

 

 

2. mode hash vs history ?

hash 모든 url을 hash형태로 서비스한다. URL이 변경될 때 페이지가 다시 로드 되지 않는다.

 

history 페이지를 다시 로드하지 않고 URL을 탐색할 수 있다.

SPA의 단일 페이지 클라이언트앱이기 때문에 사용자가 직접 http://example.com/user/id 에 접속하면 404오류가 발생한다.

 

 

 

 

3. history모드에서 404오류 해결방법

( 일단 나는 직접 타이핑해서 경로를 들어가도 오류가 안나는데..... 해결방법을 기록해 두긴 해야겠어서 써놓겠다! )

 

주소에서 해쉬뱅을 빼기위해 사용하는 히스토리 모드, 하지만 이 모드로 router를 사용하게되면 고질적인 문제에 봉착하게 된다.

바로 해당 주소를 직접 사용자가 입력하여 접속하려한다면 뜨게 되는 404 오류!

이 오류는 해쉬뱅 모드에선 일어나지 않는 오류지만 히스토리 모드에선 빈번하게 일어나는 오류이다.

 

이 오류는 도대체 왜 일어나는 것일까?

 

이 문제는 애초에 Vue 자체의 문제이기도 하다. Vue에서는 기본적으로 url 직접 접근이 불가능하다.

그 이유는 vue는 싱글 페이지 클라이언트 앱이기 때문이다. 

Vue Router는 프론트의 요청에 따라 새로운 돔을 변경하는 것이 아닌, 브라우저에 변화가 있는 부분만 돔을 변경한다.

그러니깐 실제적인 페이지에 서버가 할당되지 않았는데 해당링크를 직접 작성하여 접속하니 생기는 문제인것이다.

그래서 vue는 기본적으로 포괄적으로 뜰 수 있는 404 오류페이지를 설정할 것을 권장한다.

하지만 우리의 목적은 404 페이지로 이동하는것이 아닌, 해당 router 페이지로 이동하고 싶은것이다. 

 

 

>> webpack.config.js

devServer: {
    historyApiFallback: true,
  },
  
  
>> packge.json >> scripts
  
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

이 방법은 웹팩을 빌드했을경우의 해결방법이다. 이 부분을 참고해서 읽어주셨으면 한다.

조금 어이없을정도로 해결방법은 간단한데, devServer에 historyApiFallback: true 을 작성해주는것이다. 

historyApiFallback은 url 이외의 url 경로로 접근했을때 404 responses를 받게 되는데 

이때도 index.html을 서빙할지 결정하는 옵션이다.

이 기능을 이용하여 미지정 경로로 이동했지만, 해당 상태에 맞는 적절한 경로로 이동할 수 있게 된다.