Jak usunąć hashbang z adresu URL?

Jak usunąć hashbang #!z adresu URL?

Znalazłem opcję wyłączenia hashbanga w dokumentacji routera vue ( http://vuejs.github.io/vue-router/en/options.html ), ale ta opcja usuwa #!i po prostu wstawia#

Czy jest jakiś sposób na posiadanie czystego adresu URL?

Przykład:

NIE: #!/home

ALE: /home

Można by rzeczywiście chcą się zestaw modedo 'history'.

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

Upewnij się jednak, że serwer jest skonfigurowany do obsługi tych łączy. https://router.vuejs.org/guide/essentials/history-mode.html

W przypadku vue.js 2 użyj następujących poleceń:

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

Hash jest domyślnym ustawieniem trybu routera vue, jest ustawiony, ponieważ w przypadku skrótu aplikacja nie musi łączyć się z serwerem, aby obsługiwać adres URL. Aby to zmienić, należy skonfigurować serwer i ustawić tryb na tryb API historii HTML5.

W przypadku konfiguracji serwera jest to łącze, które pomaga skonfigurować serwery Apache, Nginx i Node.js:

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

Następnie upewnij się, że tryb routera Vue jest ustawiony w następujący sposób:

vue-router wersja 2.x

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

Dla jasności wszystkie te tryby routera vue możesz wybrać: „hash” | „historia” | "abstrakcyjny".

W przypadku Vuejs 2.5 i vue-router 3.0 nic powyżej nie działało dla mnie, jednak po krótkiej zabawie wydaje się, że działają:

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

pamiętaj, że musisz także dodać ścieżkę catch-all.

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

a serwer jest poprawnie skonfigurowany W Apache powinieneś napisać URL przepisać

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

Cytując dokumenty.

Domyślnym trybem dla routera vue jest tryb mieszania - używa skrótu adresu URL do symulacji pełnego adresu URL, dzięki czemu strona nie zostanie ponownie załadowana po zmianie adresu URL.

Aby pozbyć się skrótu, możemy użyć trybu historii routera, który wykorzystuje API history.pushState w celu uzyskania nawigacji URL bez ponownego ładowania strony:

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

W trybie historii adres URL będzie wyglądał „normalnie”, np . Http://oursite.com/user/id . Piękny!

Pojawia się jednak problem: ponieważ nasza aplikacja jest jednostronną aplikacją po stronie klienta, bez odpowiedniej konfiguracji serwera, użytkownicy otrzymają błąd 404, jeśli uzyskają dostęp do http://oursite.com/user/id bezpośrednio w przeglądarce. To brzydkie.

Nie martw się: aby rozwiązać problem, wystarczy dodać do serwera prostą ścieżkę zastępczą. Jeśli adres URL nie pasuje do żadnych zasobów statycznych, powinien obsługiwać tę samą stronę index.html, na której znajduje się Twoja aplikacja. Znowu piękne!

Do vue-routerzastosowań hash-mode, w prostych słowach to jest coś, co normalnie można oczekiwać od znacznika Achor takiego.

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

Aby zniknął skrót

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

Warning: Jeśli nie masz poprawnie skonfigurowanego serwera lub korzystasz z klienta SPA po stronie klienta, może on uzyskać, 404 Error jeśli spróbuje uzyskać dostęp https://website.com/posts/3bezpośrednio z przeglądarki. Dokumenty routera Vue

Domyślnym trybem dla routera vue jest tryb mieszania - używa skrótu adresu URL do symulacji pełnego adresu URL, dzięki czemu strona nie zostanie ponownie załadowana po zmianie adresu URL. Aby pozbyć się skrótu, możemy użyć trybu historii routera, który wykorzystuje history.pushStateinterfejs API do osiągnięcia nawigacji URL bez ponownego ładowania strony:

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)
});

trasy.js

import ComponentName from './ComponentName';

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

Odniesienie

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

A jeśli używasz AWS Amplify , zapoznaj się z tym artykułem na temat konfigurowania serwera: tryb historii routera Vue i AWS Amplify