Heim  >  Artikel  >  Web-Frontend  >  Vue-Projekt, detaillierte Erläuterung des Problems beim Zugriff auf Pfad #

Vue-Projekt, detaillierte Erläuterung des Problems beim Zugriff auf Pfad #

coldplay.xixi
coldplay.xixinach vorne
2020-08-18 17:17:003031Durchsuche

Vue-Projekt, detaillierte Erläuterung des Problems beim Zugriff auf Pfad #

Ich habe gerade mit Vue begonnen und habe viele Fragen. Was mir derzeit auffällt, ist, dass ich nach dem Start des Vue-Projekts http://ip:port eingebe und feststelle, dass die Adressleiste im Browser angezeigt wird ist eigentlich http://ip:port /#/, ich weiß nicht, was dieses „/#/“ ist, also habe ich es auf Baidu überprüft.

Grund: Bei von Vue entwickelten Einzelseitenanwendungen können wir beim Wechseln zwischen verschiedenen Seiten feststellen, dass es immer nur einen HTML-Code gibt, weshalb dieser als einzelne Seite bezeichnet wird. Der Standard-Hash-Modus von vue-router besteht darin, den Hash der URL zu verwenden, um eine vollständige URL zu simulieren. Wenn sich die URL ändert, wird die Seite nicht neu geladen. Denn bei einer normalen Seite führt das Ändern der URL definitiv zu einer Änderung der Seite und die Seite wird nicht neu geladen, nur wenn die Abfragezeichenfolge und der Hash-Wert in der URL geändert werden.

Wenn Sie kein # möchten, können Sie den Routing-Verlaufsmodus verwenden. Dieser Modus nutzt die API „history.pushState“ vollständig aus, um den URL-Sprung abzuschließen, ohne die Seite neu zu laden. Nach Verwendung dieses Modus gibt es kein #, aber Sie können wie eine normale URL darauf zugreifen.

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

Zusätzliche Kenntnisse: vue wird gleichzeitig von localhost und IP-Adresse ausgeführt und auf sie zugegriffen

Ändern Sie den Hostinhalt unter der Datei index.js und ändern Sie localhost in die lokale IP

host: '192.168.X.XX',// can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

In den Entwicklungsinhalt in der package.json-Datei. Fügen Sie am Ende –host0.0.0.0 hinzu

Das obige ist der detaillierte Inhalt vonVue-Projekt, detaillierte Erläuterung des Problems beim Zugriff auf Pfad #. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen