Was ist mit dem Vue-Seitensprung los?

Vue ist ein modernes JavaScript-Framework, das häufig zum Erstellen von Single-Page-Anwendungen (SPA) verwendet wird. Mit SPA können Benutzer durch verschiedene Seiten und Seitenkomponenten navigieren, ohne die gesamte Seite neu laden zu müssen. In Vue werden Seitensprünge hauptsächlich durch Routing implementiert.

Routing ist ein Mechanismus, der URIs Komponenten zuordnet. Ein URI ist Teil einer URL, beispielsweise „https://example.com/user/123“. Der /user/123-Teil des URI wird als Routing-Pfad bezeichnet. In Vue wird das Routing über den Vue Router implementiert.

Vue Router ist der offizielle Routing-Manager von Vue.js. Mit Vue Router können Sie Routen definieren und Routing-Pfade zu Vue-Komponenten zuordnen. Vue Router bietet außerdem Routennavigationsfunktionen, die es Benutzern ermöglichen, zu verschiedenen Seiten und Seitenkomponenten zu navigieren, ohne die gesamte Seite neu laden zu müssen. Die Routennavigation kann über Links (z. B. ) oder programmgesteuert (z. B. this.$router.push('/')) implementiert werden.

Die grundlegende Verwendung von Vue Router ist wie folgt:

1. Vue Router installieren

npm install vue-router

2. Routen erstellen

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Im obigen Code haben wir zwei Routen erstellt: „Zuhause“ und „Über“, die kartiert sind zu den Home- und About-Komponenten. Die Routing-Pfade sind „/“ bzw. „/about“.

3. Routing in Vue-Komponenten verwenden

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

Im obigen Code verwenden wir die Komponente b988a8fd72e5e0e42afffd18f951b277, um den Routenlink zu erstellen, und verwenden die Komponente <router- view&gt ; Komponente zum Rendern von Komponenten, die zur aktuellen Route passen. b988a8fd72e5e0e42afffd18f951b277组件来创建路由链接，并使用975b587bf85a482ea10b0a28848e78a4组件来渲染当前路由匹配的组件。

4. 导航到不同的路由

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/')
    },
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

在上面的代码中，我们通过编程方式导航到不同的路由。使用this.$router.push()

Navigieren Sie zu verschiedenen Routen
rrreee🎜 Im obigen Code navigieren wir programmgesteuert zu verschiedenen Routen. Verwenden Sie die Methode this.$router.push(), um den aktuellen Routing-Pfad in einen neuen Pfad zu ändern. 🎜🎜Kurz gesagt, Vue Router bietet einen flexiblen und benutzerfreundlichen Routing-Mechanismus. Durch die Definition von Routen und die Zuordnung von Routenpfaden zu Vue-Komponenten können wir Einzelseitenanwendungen erstellen und Benutzern die Navigation zu verschiedenen Seiten und Seitenkomponenten ermöglichen, ohne die gesamte Seite neu laden zu müssen. 🎜

Das obige ist der detaillierte Inhalt vonWas ist mit dem Vue-Seitensprung los?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!