Come rimuovere hashbang dall'URL?

Come rimuovere hashbang dall'URL #!?

Ho trovato l'opzione per disabilitare l'hashtag nella documentazione del router di Vue ( http://vuejs.github.io/vue-router/en/options.html ) ma questa opzione rimuove #!e basta inserire#

C'è un modo per avere un URL pulito?

Esempio:

NON: #!/home

MA: /home

Faresti in realtà vuole solo set modeal 'history'.

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

Assicurati, tuttavia, che il tuo server sia configurato per gestire questi collegamenti. https://router.vuejs.org/guide/essentials/history-mode.html

Per vue.js 2 utilizzare quanto segue:

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

Hash è un'impostazione predefinita della modalità vue-router, è impostata perché con l'hash l'applicazione non deve connettere il server per servire l'URL. Per modificarlo è necessario configurare il server e impostare la modalità sulla modalità API Cronologia HTML5.

Per la configurazione del server questo è il collegamento che ti aiuta a configurare i server Apache, Nginx e Node.js:

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

Quindi dovresti assicurarti che la modalità router di Vue sia impostata come segue:

vue-router versione 2.x

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

Per essere chiari, queste sono tutte le modalità vue-router che puoi scegliere: "hash" | "storia" | "astratto".

Per Vuejs 2.5 e vue-router 3.0 nulla ha funzionato per me, tuttavia dopo aver giocato un po 'sembra funzionare il seguente:

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

tieni presente che dovrai anche aggiungere il percorso catch-all.

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

e il server è configurato correttamente In Apache dovresti scrivere l'URL riscrivere

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

Citando i documenti.

La modalità predefinita per vue-router è la modalità hash: utilizza l'hash dell'URL per simulare un URL completo in modo che la pagina non venga ricaricata quando l'URL cambia.

Per sbarazzarci dell'hash, possiamo usare la modalità cronologia del router, che sfrutta l'API history.pushState per ottenere la navigazione dell'URL senza ricaricare la pagina:

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

Quando si utilizza la modalità cronologia, l'URL apparirà "normale", ad esempio http://oursite.com/user/id . Bellissimo!

Ecco un problema, tuttavia: poiché la nostra app è un'app lato client a pagina singola, senza una corretta configurazione del server, gli utenti riceveranno un errore 404 se accedono a http://oursite.com/user/id direttamente nel loro browser. Ora è brutto.

Non preoccuparti: per risolvere il problema, tutto ciò che devi fare è aggiungere un semplice percorso di fallback universale al tuo server. Se l'URL non corrisponde ad alcuna risorsa statica, dovrebbe servire la stessa pagina index.html in cui risiede la tua app. Di nuovo bella!

Gli vue-routerusi hash-mode, in parole semplici, sono qualcosa che normalmente ti aspetteresti da un tag achor come questo.

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

Per far sparire l'hash

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

Warning: Se non si dispone di un server configurato correttamente o si utilizza un utente SPA lato client, è possibile che venga visualizzato un utente 404 Error che tenta di accedere https://website.com/posts/3direttamente dal proprio browser. Vue Router Docs

La modalità predefinita per vue-router è la modalità hash: utilizza l'hash dell'URL per simulare un URL completo in modo che la pagina non venga ricaricata quando l'URL cambia. Per sbarazzarci dell'hash, possiamo usare la modalità cronologia del router, che sfrutta l' history.pushStateAPI per ottenere la navigazione dell'URL senza ricaricare la pagina:

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

routes.js

import ComponentName from './ComponentName';

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

Riferimento

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

E se stai utilizzando AWS amplify, consulta questo articolo su come configurare il server: modalità cronologia del router Vue e AWS Amplify