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
vue.js
vue-router
DokiCRO
źródło
źródło
const router = new VueRouter({ history: true })
{history: true}
prace do pierwszej strony, ale reszta tras zawiodła.W przypadku vue.js 2 użyj następujących poleceń:
źródło
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
Dla jasności wszystkie te tryby routera vue możesz wybrać: „hash” | „historia” | "abstrakcyjny".
źródło
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ą:
pamiętaj, że musisz także dodać ścieżkę catch-all.
źródło
a serwer jest poprawnie skonfigurowany W Apache powinieneś napisać URL przepisać
źródło
Cytując dokumenty.
źródło
Do
vue-router
zastosowańhash-mode
, w prostych słowach to jest coś, co normalnie można oczekiwać od znacznika Achor takiego.Aby zniknął skrót
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ęphttps://website.com/posts/3
bezpośrednio z przeglądarki. Dokumenty routera Vueźródło
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.pushState
interfejs API do osiągnięcia nawigacji URL bez ponownego ładowania strony:Odniesienie
źródło
A jeśli używasz AWS Amplify , zapoznaj się z tym artykułem na temat konfigurowania serwera: tryb historii routera Vue i AWS Amplify
źródło