Routing-Schnittstellenausnahme, wenn ein Vue-Router erstellt wird

Dieses Mal werde ich Ihnen die RoutingSchnittstellenausnahme beim Erstellen eines Vue-Routers vorstellen. Vorsichtsmaßnahmensollen das Problem der Routing-Schnittstellenausnahme beim Erstellen eines Vue-Routers gelöst werden Welche davon gebaut werden, die folgenden sind praktische Fälle, schauen wir uns das an.

Erstellen Sie ein Webpack-Projekt mit Vue CLI

Fügen Sie Vue-Router hinzu und verwenden Sie Routing, um eine neue Komponente einzuführen. Zu diesem Zeitpunkt werden das Routing und die 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 die Seite /first anfordert.

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

============24.8.2017Aktualisiert================

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 liegt daran, dass das Element verwendet wird Eine Nachrichtenverarbeitungsmethode, die in der Benutzeroberfläche angezeigt wird. 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('first');
  } else if (key == 3){
   this.$router.push('second');
  }
  }
 }
 }
</script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie man mit dem weißen Bildschirm auf der Homepage umgeht, nachdem Vue Build gepackt wurde

How Native verwendet fetch, um die Bild-Upload-Funktion zu implementieren

Das obige ist der detaillierte Inhalt vonRouting-Schnittstellenausnahme, wenn ein Vue-Router erstellt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!