Wie entferne ich Hashbang von der URL?

Wie entferne ich Hashbang #!von der URL?

Ich habe die Option zum Deaktivieren von Hashbang in der Dokumentation zum Vue-Router ( http://vuejs.github.io/vue-router/en/options.html ) gefunden, aber diese Option wird entfernt #!und einfach eingefügt#

Gibt es eine Möglichkeit, eine saubere URL zu haben?

Beispiel:

NICHT: #!/home

ABER: /home

Sie würden eigentlich wollen einfach nur Satz modezu 'history'.

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

Stellen Sie jedoch sicher, dass Ihr Server für die Verarbeitung dieser Links konfiguriert ist. https://router.vuejs.org/guide/essentials/history-mode.html

Verwenden Sie für vue.js 2 Folgendes:

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

Hash ist eine Standardeinstellung für den Vue-Router-Modus. Sie wird festgelegt, da die Anwendung bei Hash keinen Server verbinden muss, um die URL bereitzustellen. Um dies zu ändern, sollten Sie Ihren Server konfigurieren und den Modus auf den HTML5-Verlaufs-API-Modus einstellen.

Bei der Serverkonfiguration ist dies der Link, über den Sie Apache-, Nginx- und Node.js-Server einrichten können:

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

Dann sollten Sie sicherstellen, dass der Vue-Router-Modus wie folgt eingestellt ist:

vue-router version 2.x.

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

Dies sind alle Vue-Router-Modi, die Sie auswählen können: "Hash" | "Geschichte" | "abstrakt".

Für Vuejs 2.5 und Vue-Router 3.0 hat oben nichts für mich funktioniert, aber nach einigem Herumspielen scheint Folgendes zu funktionieren:

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

Beachten Sie, dass Sie auch den Sammelpfad hinzufügen müssen.

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

und Server ist richtig konfiguriert In Apache sollten Sie die URL neu schreiben

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

Zitieren der Dokumente.

Der Standardmodus für den Vue-Router ist der Hash-Modus. Er verwendet den URL-Hash, um eine vollständige URL zu simulieren, damit die Seite nicht neu geladen wird, wenn sich die URL ändert.

Um den Hash loszuwerden, können wir den Verlaufsmodus des Routers verwenden, der die history.pushState-API nutzt, um eine URL-Navigation ohne erneutes Laden der Seite zu erreichen:

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

Im Verlaufsmodus sieht die URL "normal" aus, z. B. http://oursite.com/user/id . . Wunderschönen!

Hier tritt jedoch ein Problem auf: Da es sich bei unserer App um eine einseitige clientseitige App ohne ordnungsgemäße Serverkonfiguration handelt, wird den Benutzern beim Zugriff auf http://oursite.com/user/id ein 404-Fehler angezeigt angezeigt, direkt in ihrem Browser . Das ist hässlich.

Keine Sorge: Um das Problem zu beheben, müssen Sie Ihrem Server lediglich eine einfache Fallback-Route hinzufügen. Wenn die URL nicht mit statischen Assets übereinstimmt, sollte sie dieselbe index.html-Seite enthalten, auf der Ihre App lebt. Wieder schön!

Die vue-routerVerwendung hash-mode, in einfachen Worten, ist etwas, das Sie normalerweise von einem solchen Anker-Tag erwarten würden.

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

Damit der Hash verschwindet

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

Warning: Wenn Sie keinen ordnungsgemäß konfigurierten Server haben oder einen clientseitigen SPA-Benutzer verwenden, erhalten 404 Error Sie möglicherweise einen, wenn er versucht, https://website.com/posts/3direkt über seinen Browser darauf zuzugreifen . Vue Router Docs

Der Standardmodus für den Vue-Router ist der Hash-Modus. Er verwendet den URL-Hash, um eine vollständige URL zu simulieren, damit die Seite nicht neu geladen wird, wenn sich die URL ändert. Um den Hash loszuwerden, können wir den Verlaufsmodus des Routers verwenden, der die history.pushStateAPI nutzt , um eine URL-Navigation ohne erneutes Laden der Seite zu erreichen:

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

route.js

import ComponentName from './ComponentName';

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

Referenz

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

Wenn Sie AWS Amplify verwenden , lesen Sie diesen Artikel zum Konfigurieren des Servers: Verlaufsmodus des Vue-Routers und AWS Amplify