URL에서 hashbang를 제거하는 방법?

URL에서 hashbang를 제거하는 방법?

---

#!URL에서 hashbang를 제거하는 방법 ?

vue router documentation ( http://vuejs.github.io/vue-router/en/options.html ) 에서 hashbang을 비활성화하는 옵션을 찾았 지만이 옵션은 제거 #!하고 그냥 넣습니다.#

깨끗한 URL을 가질 수있는 방법이 있습니까?

예:

아니: #!/home

그러나: /home

---

실제로는로 설정 mode하려고 'history'합니다.

const router = new VueRouter({
  mode: 'history'
})

그러나 서버가 이러한 링크를 처리하도록 구성되어 있는지 확인하십시오. https://router.vuejs.org/guide/essentials/history-mode.html

---

vue.js 2의 경우 다음을 사용하십시오.

const router = new VueRouter({
 mode: 'history'
})

---

해시는 기본 vue-router 모드 설정이며, 해시를 사용하면 응용 프로그램이 URL을 제공하기 위해 서버를 연결할 필요가 없기 때문에 설정됩니다. 이를 변경하려면 서버를 구성하고 모드를 HTML5 히스토리 API 모드로 설정해야합니다.

서버 구성의 경우 Apache, Nginx 및 Node.js 서버를 설정하는 데 도움이되는 링크입니다.

https://router.vuejs.org/guide/essentials/history-mode.html

그런 다음 vue 라우터 모드가 다음과 같이 설정되어 있는지 확인하십시오.

vue-router 버전 2.x

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

명확하게하기 위해 다음과 같은 모든 vue-router 모드를 선택할 수 있습니다. "hash"| "역사"| "요약".

---

Vuejs 2.5 및 vue-router 3.0의 경우 위의 아무것도 작동하지 않았지만 조금만 연주하면 다음과 같이 작동합니다.

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
  ...
    ,
    { path: '*', redirect: '/' }, // catch all use case
  ],
})

포괄 경로도 추가해야합니다.

---

window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

서버가 올바르게 구성되어 있습니다. 아파치에서 URL을 다시 작성해야합니다.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

---

문서 인용.

vue-router의 기본 모드는 해시 모드입니다. URL 해시를 사용하여 URL이 변경 될 때 페이지가 다시로드되지 않도록 전체 URL을 시뮬레이션합니다.

To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

참고URL : https://stackoverflow.com/questions/34623833/how-to-remove-hashbang-from-url