So übergeben Sie eine neue Seite über die Schaltfläche in Vue

In Vue können wir durch Routing zwischen Seiten wechseln. In diesem Artikel erfahren Sie, wie Sie mithilfe von Schaltflächen in Vue zu einer neuen Seite wechseln. Wir werden Vue Router verwenden, das offizielle Router-Plugin von Vue.

Vue Router ist der offizielle Router für Vue.js. Es ermöglicht uns, Routing-Tabellen einzurichten, die einige URLs Vue-Komponenten zuordnen. Auf diese Weise können wir über die URL zu verschiedenen Seiten navigieren. Lassen Sie uns zuerst Vue Router installieren.

Vue Router installieren

Um Vue Router verwenden zu können, müssen wir ihn zunächst installieren. Es kann mit npm oder Yarn installiert werden.

Verwenden Sie npm:

npm install vue-router

Verwenden Sie Garn:

yarn add vue-router

Verwenden Sie Vue Router im Vue-Projekt

Nach der Installation von Vue Router müssen wir es im Vue-Projekt verwenden. Um Vue Router in einem Vue-Projekt zu verwenden, müssen Sie Vue Router in main.js einführen und verwenden.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // ...
  ]
})

new Vue({
  router,
  // ...
}).$mount('#app')

Im obigen Code haben wir Vue und Vue Router zuerst in main.js eingeführt. Dann weisen wir Vue über Vue.use(VueRouter) an, Vue Router zu verwenden. Als Nächstes erstellen wir eine VueRouter-Instanz und übergeben ihr einige Routing-Regeln. Schließlich übergeben wir diese VueRouter-Instanz an die Router-Option der Vue-Instanz. Auf diese Weise kann Vue Router in unserer Anwendung funktionieren.

Routen festlegen

In Vue Router können wir das Attribut routes verwenden, um Routen festzulegen. routes 属性来设置路由。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

以上代码中，我们在 routes 属性中设置了两个路径，'/'和'/about'。当我们访问这些路径时，Vue Router将渲染与路径对应的组件。

传递参数

在Vue Router中，我们可以通过URL参数来传递数据。我们可以在URL中添加参数，这些参数将被传递给我们定义的组件。

例如，我们要传递一个名为 id 的参数，我们可以像这样设置路由：

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
})

在这个路由中，我们使用 ':id' 设置了参数。这个参数将被传递给我们的组件 User。

在User组件中，我们可以通过 $route.params.id 来访问这个参数。例如：

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

以上代码中，我们使用 $route.params.id 访问了我们传递过来的参数。

前进和后退

Vue Router也支持前进和后退的功能。我们可以使用 $router.go() 方法来实现前进和后退。例如：

<template>
  <div>
    <button @click="$router.go(-1)">Back</button>
    <button @click="$router.go(1)">Foward</button>
  </div>
</template>

以上代码中，我们创建了两个按钮。一个用来后退，一个用来前进。当点击这些按钮时，我们调用 $router.go()rrreee

Im obigen Code legen wir zwei Pfade fest, „/“ und „/about“ im Attribut routes. Wenn wir auf diese Pfade zugreifen, rendert Vue Router die dem Pfad entsprechende Komponente.

Übergabeparameter

In Vue Router können wir Daten über URL-Parameter übergeben. Wir können der URL Parameter hinzufügen und diese Parameter werden an die von uns definierten Komponenten übergeben. 🎜🎜Wenn wir beispielsweise einen Parameter namens id übergeben möchten, können wir die Route wie folgt festlegen: 🎜rrreee🎜In dieser Route haben wir den Parameter mit „:id“ festgelegt. Dieser Parameter wird an unsere Komponente Benutzer übergeben. 🎜🎜In der Benutzerkomponente können wir über $route.params.id auf diesen Parameter zugreifen. Zum Beispiel: 🎜rrreee🎜Im obigen Code verwenden wir $route.params.id, um auf die von uns übergebenen Parameter zuzugreifen. 🎜🎜Vorwärts und Rückwärts🎜🎜Vue Router unterstützt auch Vorwärts- und Rückwärtsfunktionen. Wir können die Methode $router.go() verwenden, um vorwärts und rückwärts zu erreichen. Zum Beispiel: 🎜rrreee🎜Im obigen Code haben wir zwei Schaltflächen erstellt. Eine für den Rückwärtsgang und eine für den Vorwärtsgang. Wenn auf diese Schaltflächen geklickt wird, rufen wir die Methode $router.go() auf und übergeben einen numerischen Parameter. Diese Zahl stellt die Anzahl der Schritte dar, die wir vorwärts oder rückwärts gehen möchten. Negative Zahlen bedeuten einen Rückschritt, positive Zahlen bedeuten einen Vorwärtsgang. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir gelernt, wie man mit Vue Router Routen einrichtet, Parameter übergibt und vorwärts und rückwärts geht. Mit diesen Methoden können wir problemlos zwischen den Seiten im Vue-Projekt wechseln. 🎜

Das obige ist der detaillierte Inhalt vonSo übergeben Sie eine neue Seite über die Schaltfläche in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!