Heim > Web-Frontend > Front-End-Fragen und Antworten > Was ist mit dem Vue-Seitensprung los?

Was ist mit dem Vue-Seitensprung los?

PHPz
Freigeben: 2023-05-25 10:19:08
Original
763 Leute haben es durchsucht

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
Nach dem Login kopieren
  1. 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
    }
  ]
})
Nach dem Login kopieren

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“.

  1. 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>
Nach dem Login kopieren

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

  1. 导航到不同的路由
<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>
Nach dem Login kopieren

在上面的代码中,我们通过编程方式导航到不同的路由。使用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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage