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
vue.js
vue-router
DokiCRO
la source
la source
const router = new VueRouter({ history: true })
{history: true}
œuvres pour la première page, mais le reste des itinéraires a échoué.Pour vue.js 2, utilisez ce qui suit:
la source
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
Pour être clair, ce sont tous les modes vue-router que vous pouvez choisir: "hash" | "histoire" | "abstrait".
la source
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:
notez que vous devrez également ajouter le chemin d'accès universel.
la source
et le serveur est correctement configuré Dans apache, vous devez écrire la réécriture de l'url
la source
Citant les documents.
la source
Les
vue-router
utilisationshash-mode
, en termes simples, c'est quelque chose que vous attendez normalement d'une balise achor comme celle-ci.Pour faire disparaître le hachage
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 un404 Error
s'il essaie d'accéderhttps://website.com/posts/3
directement à partir de son navigateur. Vue Router Docsla source
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.pushState
API pour réaliser la navigation URL sans recharger la page:Référence
la source
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
la source