Vue-Methode zum Entfernen des #-Zeichens aus dem Pfad

Jeder weiß, dass der Vue-Router zwei Modi hat, den Hash-Modus und den Verlaufsmodus, und der mit # ist der Hash-Modus. Als nächstes bringe ich Ihnen eine Lösung für Vue, um das #-Zeichen im Pfad zu entfernen. Freunde, die interessiert sind, sollten einen Blick darauf werfen.

Während des Entwicklungsprozesses habe ich festgestellt, dass der Pfad ein /#/-Zeichen hat Ich ging auch zu Es fällt nicht ab, es ist hässlich.

Wie wir alle wissen, verfügt der Vue-Router über zwei Modi: den Hash-Modus und den Verlaufsmodus.

Der mit # ist der Hash-Modus.

Stellen Sie einfach den Modus im Router auf Verlauf

Dann gibt es ein Problem. Sobald die Schnittstelle aktualisiert wird, wechselt sie auf 404! ! ! !

Nachdem ich online gesucht habe, muss ich die Back-End-Umgebung konfigurieren.

Hier wird nur die Nginx-Konfiguration aufgeführt. Klicken Sie hier, um zur offiziellen Website zu gelangen.

Konfigurieren Sie zuerst config/index.js.

Ändern Sie den öffentlichen Pfad Stammverzeichnis

module.exports = {
  build: {
      env: require('./prod.env'),
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',   // hash 模式会默认的在此处 添加为 assetsPublicPath: './'
      productionSourceMap: true,
      ...
    }
}

Dann nignx konfigurieren

server {
    listen 0.0.0.0:12345;
    location / {
        root /home/我的应用跟目录;
        try_files $uri $uri/ /index.html =404;  // 这个是重点
    }
    error_page 404 /index.html
}

URL hat kein # mehr, wie perfekt

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die Kapselung der Vue2.0 Multi-Tab-Switching-Komponente

Geschrieben unter Verwendung von ES6-Klassen imitieren Vue Ein Beispiel für eine bidirektionale Bindung

Basierend auf Cropper.js, um Vue zu kapseln und die Funktion der Online-Bildzuschneidekomponente zu implementieren

Das obige ist der detaillierte Inhalt vonVue-Methode zum Entfernen des #-Zeichens aus dem Pfad. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!