Comment supprimer le hashbang de l'URL?

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

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

Pour vue.js 2, utilisez ce qui suit:

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

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

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.

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>

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!

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

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

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

Et si vous utilisez AWS amplify, consultez cet article sur la façon de configurer le serveur: le mode historique du routeur Vue et AWS Amplify