Wie erhält Vue den Routennamen und lädt verschiedene Daten?

Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklungstechnologie werden in der tatsächlichen Entwicklung immer mehr Front-End-Frameworks und -Bibliotheken verwendet. Darunter ist vue.js zu einem der beliebtesten Front-End-Frameworks geworden Die Wahl vieler Webanwendungsentwickler. Wie lade ich in Vue nach dem Routensprung unterschiedliche Daten entsprechend dem erhaltenen Routennamen? In diesem Artikel wird eine Implementierungsmethode beschrieben.

1. vue-router

In der offiziellen Dokumentation von vue wird die Vue-Router-Routing-Manager-Bibliothek vorgestellt, wenn die Anwendung komplexe Seitensprünge ausführen muss und wann Die Verwaltung und Verwendung von Vue-Router kann uns eine bessere Lösung bieten. Der Vue-Router verfügt über leistungsstarke Funktionen wie asynchrones Laden, Routing-Parameter, Navigations-Hooks und verschachteltes Routing. Seine Entstehung bietet auch Komfort beim Erstellen von Vue-Anwendungen.

2. Routensprung und Parameterübertragung

In Vue-Router verwenden wir im Allgemeinen die Router-Link- oder $router.push()-Methode für den Routensprung Der Kern beider Methoden besteht darin, einen Routensprung durch Ändern der URL-Adresse zu erreichen. Auch die Übergabe von Parametern beim Routing von Sprüngen ist sehr einfach. Sie müssen lediglich Abfrage- oder Parameterparameter zum Sprunglink hinzufügen.

Zum Beispiel haben wir jetzt die folgende Routing-Konfiguration:

const routes = [
  { path: '/home', component: Home },
  { path: '/detail', component: Detail },
  { path: '*', component: NotFound }
]

Gleichzeitig müssen wir beim Springen zur Detailroute einen ID-Parameter übergeben, den wir implementieren können Es sieht so aus:

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail', query: { id: 123 } })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail&#39;, query: { id: 123 } }">Detail</router-link>

Wie bekomme ich die von der Route in der Detailkomponente übergebenen Parameter? Wir können Folgendes tun:

this.$route.query.id

Hier ist zu beachten, dass die Verwendungsmethode etwas anders ist, wenn es sich um einen Parameterparameter handelt. Zusätzlich zur Notwendigkeit, beim Überspringen von Links Parameterparameter zu verwenden, muss der Pfad auch geändert werden, um beim Konfigurieren von Routen dynamische Parameter einzuschließen. Das Beispiel lautet wie folgt:

const routes = [
  { path: '/home', component: Home },
  { path: '/detail/:id', component: Detail },
  { path: '*', component: NotFound }
]

Beim Überspringen von Links müssen wir Änderungen vornehmen Die im Objekt enthaltenen Parameternamen entsprechen den in der Routing-Konfiguration deklarierten Parameternamen. Das Beispiel lautet wie folgt:

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail/123' })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail/123&#39; }">Detail</router-link>

Beim Abrufen der von der Route übergebenen Parameter in der Detailkomponente muss $route.params.id verwenden. Das war’s.

3. Dynamisches Rendern von Daten

In tatsächlichen Anwendungen müssen wir manchmal verschiedene Daten basierend auf Routennamen dynamisch laden. Normalerweise können wir die Daten basierend auf dem Routennamen abrufen und sie in der erstellten oder gemounteten Hook-Funktion der Komponente rendern. Zum Beispiel:

export default {
  name: 'Detail',
  data() {
    return {
      detailData: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const name = this.$route.name
      if(name === 'detailA') {
        // 加载数据A
        axios.get('/api/detailA').then(res => {
          this.detailData = res.data
        })
      } else if(name === 'detailB') {
        // 加载数据B
        axios.get('/api/detailB').then(res => {
          this.detailData = res.data
        })
      }
      // ... 可以根据需要继续添加其他路由名称的loading操作
    }
  }
}

Im obigen Beispiel ermitteln wir den aktuellen Routennamen basierend auf $route.name und senden dann die entsprechende Anfrage, um die Daten zu laden und im Datenattribut der Komponente zu speichern. und fahren Sie dann mit der Seite Rendering von Daten fort.

4. Zusammenfassung

In diesem Artikel wird hauptsächlich beschrieben, wie Sie den aktuellen Routennamen abrufen und verschiedene Daten basierend auf dem Namen in der Vue-Anwendung laden. Wir können die von vue-router bereitgestellten Routensprung- und Parameterübergabefunktionen verwenden, um die zu ladenden Daten und den Routennamen zuzuordnen und dann die entsprechenden Daten entsprechend dem Routennamen in die erstellte oder bereitgestellte Hook-Funktion der Komponente zu laden. Diese Implementierungsmethode ist einfach und bequem und kann auch die Entwicklungseffizienz verbessern.

Das obige ist der detaillierte Inhalt vonWie erhält Vue den Routennamen und lädt verschiedene Daten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!