So springen Sie zur gleichen Seite und wechseln die Parameter in Vue

Vue.js ist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es übernimmt das MVVM-Modell und bindet DOM und Daten auf datengesteuerte Weise. Im Anwendungsentwicklungsprozess ist das Front-End-Routing ein sehr wichtiger Teil. Vue.js stellt das Vue-Router-Plug-In bereit, mit dem Front-End-Routing-Funktionen implementiert werden können.

Im tatsächlichen Geschäftsleben stoßen wir häufig auf Situationen, in denen wir zur gleichen Seite springen und die Parameter wechseln müssen. Wenn Benutzer beispielsweise die Produktdetailseite durchsuchen, müssen sie auf derselben Seite zu verschiedenen Produkten wechseln. Zu diesem Zeitpunkt können wir die Funktionen „Dynamic Routing Matching“ und „Lazy Loading“ des Vue-Routers verwenden, um dies zu erreichen.

1. Dynamisches Routen-Matching

Das Routing-System von Vue.js ermöglicht es uns, URLs mit Parametern zu definieren und die Parameter beim Routing-Matching einzufügen.

Definieren Sie zunächst die dynamische Route in router.js:

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

Im obigen Code definieren wir eine Route mit dem Namen „Goods“ und der Pfad ist „/goods/:id“. Darunter bedeutet „:id“, dass es sich um einen dynamischen Parameter handelt und der Benutzer beim Zugriff einen beliebigen Parameterwert übergeben kann.

Als nächstes rufen wir die Routing-Parameter über $route in der Goods.vue-Komponente ab:

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

Im obigen Code erhalten wir die Routing-Parameter über $route.params und ändern dann den aktuellen Parameterwert beim Produktwechsel. Addieren Sie 1, und springen Sie über die Methode $router.push zur Route mit dem Namen „Goods“ und übergeben Sie die Parameter. Dies ermöglicht die Funktion, zwischen verschiedenen Produkten auf derselben Seite zu wechseln.

2. Lazy Loading

Lazy Loading kann als verzögertes Laden verstanden werden, was bedeutet, dass der entsprechende Code nur dann geladen wird, wenn er benötigt wird. Die Verwendung von Lazy Loading kann die Seitenladegeschwindigkeit und die Gesamtleistung verbessern.

In Vue.js können Sie die Funktion import() verwenden, um Lazy Loading zu implementieren. Ändern Sie den Verweis auf die Komponente in router.js, um Lazy Loading zu verwenden:

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

Der Import('@/views/Goods.vue') dient hier dazu, die Goods.vue-Komponente durch Lazy Loading einzuführen. Wenn der Benutzer auf diese Route zugreift, wird der entsprechende Code geladen.

3. Vollständiger Code

Schauen wir uns zum Schluss den vollständigen Code an:

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'Goods',
      component: () => import('@/views/Goods.vue')
    }
  ]
})

Goods.vue

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

Im obigen Code verwenden wir die Technologie des dynamischen Routenabgleichs und des verzögerten Ladens. Die Funktion zum Wechseln zwischen verschiedenen Produkten auf derselben Seite wurde implementiert. Dies ist ein Anwendungsszenario des Routing-Systems in Vue.js. Für Schüler, die gerade erst mit dem Erlernen von Vue.js begonnen haben, ist es sehr lohnenswert, es zu lernen und zu beherrschen.

Das obige ist der detaillierte Inhalt vonSo springen Sie zur gleichen Seite und wechseln die Parameter in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!