Comment supprimer le hashbang de l'URL?

258

Comment supprimer le hashbang #!de l'URL?

J'ai trouvé une option pour désactiver le hashbang dans la documentation du routeur vue ( http://vuejs.github.io/vue-router/en/options.html ) mais cette option supprime #!et vient de mettre#

Existe-t-il un moyen d'avoir une URL propre?

Exemple:

NE PAS: #!/home

MAIS: /home

DokiCRO
la source

Réponses:

485

Vous voudriez en fait juste vous mettre modeà 'history'.

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

Assurez-vous cependant que votre serveur est configuré pour gérer ces liens. https://router.vuejs.org/guide/essentials/history-mode.html

Bill Criswell
la source
4
Merci Bill ici, vous pouvez supprimer le hashbang faux aussi voici le code:const router = new VueRouter({ history: true })
DokiCRO
2
Je jouais avec github.com/vuejs/vue-hackernews et j'ajoutais des{history: true} œuvres pour la première page, mais le reste des itinéraires a échoué.
Hari KT
Vous voulez dire lorsque vous rechargez l'application sur d'autres itinéraires? Si tel est le cas, vous devez configurer correctement votre serveur.
Bill Criswell
Veuillez faire en sorte que les informations vue.js 2 soient au début de la réponse
diralik
2
Dans quel fichier faut-il l'ajouter?
Derzu
81

Pour vue.js 2, utilisez ce qui suit:

const router = new VueRouter({
 mode: 'history'
})
Israel Morales
la source
5
Quelle est la différence entre cette réponse et la réponse acceptée ici?
Ilyas karim
15
La réponse acceptée a été modifiée après avoir réalisé que c'était la solution, vous pouvez consulter le journal d'édition de la réponse acceptée.
Israel Morales
22

Hash est un paramètre par défaut du mode vue-router, il est défini car avec le hachage, l'application n'a pas besoin de se connecter au serveur pour servir l'url. Pour le changer, vous devez configurer votre serveur et définir le mode sur le mode API Historique HTML5.

Pour la configuration du serveur, voici le lien pour vous aider à configurer les serveurs Apache, Nginx et Node.js:

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

Ensuite, vous devez vous assurer que le mode routeur de vue est défini comme suit:

vue-router version 2.x

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

Pour être clair, ce sont tous les modes vue-router que vous pouvez choisir: "hash" | "histoire" | "abstrait".

Tadas Stasiulionis
la source
20

Pour Vuejs 2.5 et vue-router 3.0, rien de ci-dessus n'a fonctionné pour moi, mais après avoir joué un peu, les éléments suivants semblent fonctionner:

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

notez que vous devrez également ajouter le chemin d'accès universel.

Adil H. Raza
la source
Cela a fonctionné pour moi contrairement aux autres réponses. Merci Adil!
Hugo S
10
window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

et le serveur est correctement configuré Dans apache, vous devez écrire la réécriture de l'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>
vivek
la source
8

Citant les documents.

Le mode par défaut pour vue-router est le mode de hachage - il utilise le hachage d'URL pour simuler une URL complète afin que la page ne soit pas rechargée lorsque l'URL change.

Pour se débarrasser du hachage, nous pouvons utiliser le mode historique du routeur, qui exploite l'API history.pushState pour réaliser la navigation URL sans rechargement de page:

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

Lorsque vous utilisez le mode historique, l'URL sera "normale", par exemple http://oursite.com/user/id . Belle!

Mais voici un problème: comme notre application est une application cliente d'une seule page, sans configuration de serveur appropriée, les utilisateurs obtiendront une erreur 404 s'ils accèdent à http://oursite.com/user/id directement dans leur navigateur. Maintenant c'est moche.

Ne vous inquiétez pas: pour résoudre le problème, tout ce que vous avez à faire est d'ajouter une route de secours simple à votre serveur. Si l'URL ne correspond à aucun élément statique, elle doit diffuser la même page index.html que celle dans laquelle se trouve votre application. Encore une fois!

L'homme observateur
la source
2

Les vue-routerutilisations hash-mode, en termes simples, c'est quelque chose que vous attendez normalement d'une balise achor comme celle-ci.

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

Pour faire disparaître le hachage

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

Warning: Si vous ne disposez pas d'un serveur correctement configuré ou si vous utilisez un utilisateur SPA côté client, vous pouvez en obtenir un 404 Error s'il essaie d'accéder https://website.com/posts/3directement à partir de son navigateur. Vue Router Docs

Ritankar Paul
la source
0

Le mode par défaut pour vue-router est le mode de hachage - il utilise le hachage d'URL pour simuler une URL complète afin que la page ne soit pas rechargée lorsque l'URL change. Pour se débarrasser du hachage, nous pouvons utiliser le mode historique du routeur, qui exploite l' history.pushStateAPI pour réaliser la navigation URL sans recharger la page:

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
   }
]

Référence

Rijosh
la source
2
Bien que ce code puisse fournir une solution à la question, il est préférable d'ajouter du contexte pour expliquer pourquoi / comment cela fonctionne. Cela peut aider les futurs utilisateurs à apprendre et à appliquer ces connaissances à leur propre code. Vous êtes également susceptible d'avoir des commentaires positifs des utilisateurs sous forme de votes positifs, lorsque le code est expliqué.
borchvm