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을 시뮬레이션합니다.

해시를 없애기 위해, 우리는 페이지의 재로드없이 URL 탐색을 달성하기 위해 history.pushState API를 이용하는 라우터의 히스토리 모드를 사용할 수 있습니다 :

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

히스토리 모드를 사용하는 경우 URL은 "정상"으로 표시됩니다 (예 : http://oursite.com/user/id) . 아름다운!

여기에 문제가 있습니다. 앱이 단일 페이지 클라이언트 측 앱이므로 적절한 서버 구성이 없으므로 사용자가 브라우저에서 http://oursite.com/user/id에 직접 액세스하면 404 오류가 발생 합니다. 이제는 추악합니다.

걱정하지 마십시오. 문제를 해결하려면 서버에 간단한 catch-all 폴백 경로를 추가하기 만하면됩니다. URL이 정적 자산과 일치하지 않으면 앱이있는 것과 동일한 index.html 페이지를 제공해야합니다.

vue-router사용 hash-mode, 간단한 단어에서 당신이 일반적으로이 같은 achor 태그에서 기대할 수있는 것이 무엇인가이다.

<a href="#some_section">link<a>

해시가 사라지게하려면

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
] // Routes Array
const router = new VueRouter({
  mode: 'history', // Add this line
  routes
})

Warning: 서버가 올바르게 구성되어 있지 않거나 클라이언트 측 SPA를 사용하는 404 Error 경우 https://website.com/posts/3브라우저에서 직접 액세스하려고하면 메시지가 표시 될 수 있습니다 . Vue 라우터 문서

vue-router의 기본 모드는 해시 모드입니다. URL 해시를 사용하여 전체 URL을 시뮬레이션하므로 URL이 변경 될 때 페이지가 다시로드되지 않습니다. 해시를 없애기 위해 우리는 라우터의 히스토리 모드를 사용할 수 있습니다.이 히스토리 모드는 history.pushStateAPI를 활용하여 페이지를 다시로드하지 않고 URL 탐색을 수행합니다.

import {routes} from './routes'; //import the routes from routes.js    

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

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

route.js

import ComponentName from './ComponentName';

export const routes = [
   {
      path:'/your-path'
      component:ComponentName
   }
]

참고

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

또한 AWS Amplify를 사용하는 경우 Vue 라우터 기록 모드 및 AWS Amplify 서버 구성 방법에 대한이 기사를 확인하십시오.