So lösen Sie das Problem, dass die Routing-Seite beim Erstellen im Vue-Router nicht richtig angezeigt werden kann (ausführliches Tutorial)

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem löst, dass der Vue-Router die Routing-Seite während des Builds nicht richtig anzeigen kann. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Erstellen Sie ein Webpack-Projekt mit Vue CLI

Fügen Sie einen Vue-Router hinzu und verwenden Sie Routing, um eine neue Komponente einzuführen. Zu diesem Zeitpunkt sind die Routen und Links wie folgt geschrieben

const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 routes: [
 {
  path: '/first',
  component: firstCom
 }
 ]
})

<a href="/first" rel="external nofollow" >Try this!</a>

1 Es gibt kein Problem mit npm run dev

2. npm run build package

3. Starten Sie einen Dienst (zum Beispiel: python -m SimpleHTTPServer) und überprüfen Sie dann die Seite index.html und stellen Sie fest, dass die Route funktioniert Fordern Sie die /erste Seite an.

4. Lösung: Ändern Sie den Verlauf in der Routing-Konfiguration in Hash und ändern Sie /first im Link in /#/first. Problem gelöst.

============Aktualisiert am 24.08.2017================

Nachdem ich nach einigen Informationen gesucht hatte, stellte ich fest, dass es tatsächlich möglich ist, den Verlauf für den Router-Modus zu verwenden. Das Problem trat auf, als ich den Sprung machte. Ich habe es als selbstverständlich angesehen, dass ich window.location.href="" verwendet habe, aber eigentlich sollte ich router.push verwenden. Das handleSelect im Code ist auf die Verwendung einer Nachrichtenverarbeitungsmethode zurückzuführen, die im Element ui erscheint. Es versteht sich, dass diese Methode ausgelöst wird, wenn auf die Schaltfläche geklickt wird. Wenn die Taste der Schaltfläche 2 ist, springen Sie zur ersten, und wenn die Taste 3 ist, springen Sie zur zweiten.

<script>
 export default {
 data () {
  return {
  }
 },
 methods: {
  handleSelect(key, keyPath) {
  if (key == 2){
   this.$router.push(&#39;first&#39;);
  } else if (key == 3){
   this.$router.push(&#39;second&#39;);
  }
  }
 }
 }
</script>

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

JavaScript-Sternnavigationsleisten-Implementierungsmethode

berechnet, gefiltert, von vue.js bezogen, detailliert Erläuterung der Verwendung und des Unterschieds von Set

Detaillierte Erläuterung des gesamten Prozesses vom Kauf eines Domainnamens bis zur Verwendung von pm2 zur Bereitstellung des node.js-Projekts

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Routing-Seite beim Erstellen im Vue-Router nicht richtig angezeigt werden kann (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!