web-dev-qa-db-fra.com

Comment supprimer hashbang de l'URL?

Comment supprimer hashbang #! de l'URL?

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

Est-il possible d'avoir une URL propre?

Exemple:

PAS: #!/home

MAIS: /home

vue.jsvue-router
199
DokiCRO

En fait, vous voudriez simplement définir mode sur '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

384
Bill Criswell

Pour vue.js 2, utilisez ce qui suit:

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

Le hachage est un paramètre par défaut du mode vue-routeur, car, avec le hachage, l'application n'a pas besoin de se connecter au serveur pour afficher l'URL. Pour le changer, vous devez configurer votre serveur et définir le mode sur le mode HTML5 History API.

Pour la configuration du serveur, ce lien vous aidera à 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 de routeur 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-routeur que vous pouvez choisir: "hash" | "histoire" | "abstrait".

16
Tadas Stasiulionis

Pour Vuejs 2.5 & vue-router 3.0, rien de ce qui précède ne fonctionnait pour moi. Toutefois, 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 fourre-tout.

11
Adil H. Raza
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 l'URL de réécriture

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

Citer les docs.

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

Pour supprimer le hachage, nous pouvons utiliser le mode historique du routeur, qui exploite l'API history.pushState pour permettre la navigation dans les URL sans rechargement de page:

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

Lorsque vous utilisez le mode historique, l’URL aura l’air "normal", par exemple. http://oursite.com/user/id . Magnifique!

Voici cependant un problème: étant donné que notre application est une application côté page unique, sans configuration appropriée du serveur, les utilisateurs recevront 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, il vous suffit d'ajouter une route de repli simple et attrayante à votre serveur. Si l'URL ne correspond à aucun actif statique, il devrait servir la même page index.html dans laquelle votre application vit. Beau, encore!

4
Ankit Kumar Ojha