So verwenden Sie Vuejs zum Anpassen des Routings

Dieses Mal zeige ich Ihnen, wie Sie Vuejs zum Definieren des Routings verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vuejs zum Anpassen des Routings gelten. Hier ist ein praktischer Fall sehen.

Wir wissen, dass Komponenten Vorlagen über Vorlagen angeben können. Darüber hinaus bietet Vue uns auch eine Möglichkeit, Rendering-Komponenten anzupassen, d. h. Rendering-Funktionen Wenn Sie Render verwenden, lesen Sie bitte die offizielle Dokumentation für die spezifische Verwendung von Render.

Als nächstes beginnen wir mit der Implementierung unseres Front-End-Routings.

Einfache Implementierung

Wir führen zunächst den Befehl vue init webpack vue-router-demo aus, um unser Projekt zu initialisieren (beachten Sie, dass Sie sich während der Initialisierung nicht für die Verwendung von vue-router entscheiden).

Erstellen Sie zunächst die Datei „layout/index.vue“ im Verzeichnis src, um sie als Vorlage für die Seite zu verwenden. Der Code lautet wie folgt:

<template>
  <div class="container">
    <ul>
      <li><a :class="{active: $root.currentRoute === &#39;/&#39;}" href="/">Home</a></li>
      <li><a :class="{active: $root.currentRoute === &#39;/hello&#39;}" href="/hello">HelloWord</a></li>
    </ul>
    <slot></slot>
  </div></template><script>export default {  name: &#39;Layout&#39;,
};</script><style scoped>.container {  max-width: 600px;  margin: 0 auto;  padding: 15px 30px;  background: #f9f7f5;
}a.active {  color: #42b983;
}</style>

Verschieben Sie dann „components/HelloWorld.vue“. zu src/pages und ändern Sie seinen Code, um das oben erstellte Seitenvorlagenpaket zu verwenden:

<template>
  <layout>
      <!-- 原模板内容 -->
  </layout></template><script>import Layout from &#39;@/layout&#39;;export default {  name: &#39;HelloWorld&#39;,  components: {
    Layout,
  },  // ...};</script><!-- ... -->

Natürlich müssen Sie auch eine 404-Seite hinzufügen, die als Schnittstelle fungiert, wenn der Benutzer gibt eine Route ein, die nicht existiert.

Der letzte Schritt ist unser wichtigster Schritt: Schreiben Sie main.js neu und wechseln Sie die Rendering-Komponenten dynamisch entsprechend der Seiten-URL.

Routenzuordnung definieren:

// url -> Vue Componentconst routes = {  '/': 'Home',  '/hello': 'HelloWorld',
};

Fügen Sie die berechnete Eigenschaft VueComponent hinzu und führen Sie die erforderlichen Komponenten basierend auf window.location.pathname ein.

const app = new Vue({  el: '#app',
  data() {    return {      // 当前路由
      currentRoute: window.location.pathname,
    };
  },  computed: {
    ViewComponent() {      const currentView = routes[this.currentRoute];      /* eslint-disable */
      return (
        currentView
          ? require('./pages/' + currentView + '.vue')
          : require('./pages/404.vue')
      );
    },
  },
});

implementiert die Rendering-Logik. Die Render-Funktion stellt einen Parameter zum Generieren von VNode bereit. Sie können die dynamisch eingeführte Komponente direkt an ihn übergeben, um das Rendering durchzuführen.

const app = new Vue({  // ...
  render(h) {    // 因为组件是以 es module 的方式引入的，
    // 此处必须使用 this.ViewComponent.default 属性作为参数
    return h(this.ViewComponent.default);
  }
});

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:

Manipulieren von DOM-Objektstilen für grundlegendes JS-Lernen. Objekt

Grundlegende Datentypen für JS-Grundverbesserungslernen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vuejs zum Anpassen des Routings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!