Jak usunąć hashbang z adresu URL?

257

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

DokiCRO
źródło

Odpowiedzi:

482

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

Bill Criswell
źródło
4
Dzięki Bill tutaj możesz usunąć false hashbang też tutaj jest kod:const router = new VueRouter({ history: true })
DokiCRO
2
Bawiłem się z github.com/vuejs/vue-hackernews i dodawałem{history: true} prace do pierwszej strony, ale reszta tras zawiodła.
Hari KT
Masz na myśli, gdy przeładujesz aplikację na inne trasy? Jeśli tak, musisz poprawnie skonfigurować serwer.
Bill Criswell,
Proszę podać informacje o vue.js 2 na początku odpowiedzi
diralik
2
Do którego pliku należy go dodać?
Derzu
81

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

const router = new VueRouter({
 mode: 'history'
})
Israel Morales
źródło
5
Jaka jest tutaj różnica między tą odpowiedzią a odpowiedzią zaakceptowaną?
Ilyas karim
15
Zaakceptowana odpowiedź została zredagowana po uświadomieniu sobie, że jest to rozwiązanie, możesz sprawdzić dziennik edycji zaakceptowanej odpowiedzi.
Israel Morales,
22

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".

Tadas Stasiulionis
źródło
20

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.

Adil H. Raza
źródło
Działa to dla mnie w przeciwieństwie do innych odpowiedzi. Dzięki Adil!
Hugo S
10
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>
vivek
źródło
8

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!

Człowiek obserwatora
źródło
2

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

Ritankar Paul
źródło
0

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

Rijosh
źródło
2
Chociaż ten kod może dostarczyć rozwiązania pytania, lepiej jest dodać kontekst wyjaśniający, dlaczego / jak to działa. Może to pomóc przyszłym użytkownikom w nauce i zastosowaniu tej wiedzy do własnego kodu. Prawdopodobnie będziesz mieć pozytywne opinie od użytkowników w postaci pozytywnych opinii, gdy kod zostanie wyjaśniony.
borchvm