Routing-Steuerungs- und Verwaltungstechnologie in Vue

Vue ist ein sehr beliebtes Front-End-Framework. Es bietet einen Routing-Manager für eine bequeme Routing-Steuerung und -Verwaltung. In diesem Artikel befassen wir uns mit der Routing-Steuerungs- und Verwaltungstechnologie in Vue, um Entwicklern zu helfen, diese Technologien besser zu verstehen und anzuwenden.

1. Grundlagen von Vue Router

Vue Router ist der offizielle Routing-Manager von Vue.js. Er ist tief in den Kern von Vue.js integriert und kann die Routing-Steuerung von Einzelseitenanwendungen gut implementieren. Vue Router implementiert dynamische Ansichtsaktualisierungen, indem es die Zuordnung zwischen Routen und Komponenten verwaltet, den Ansichts- und Datenstatus effektiv isoliert und die Anwendungsstruktur klarer und einfacher zu verwalten macht.

1.1 Installation und Einführung

Bevor Sie Vue Router verwenden, müssen Sie ihn über npm installieren. Sie können es mit dem folgenden Befehl installieren:

npm install vue-router –save

Nach Abschluss der Installation müssen Sie Vue Router in die Vue-Anwendung einführen und die Grundkonfiguration durchführen. Sie können den folgenden Code in die Datei main.js schreiben:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue')
}, {
  path: '/contact',
  name: 'contact',
  component: () => import('./pages/Contact.vue')
}, {
  path: '*',
  redirect: '/home'
}]

const router = new VueRouter({
  mode: 'hash', // hash模式
  routes // 路由路径配置
})

new Vue({
  el: '#app',
  router, // 注册路由器
  render: h => h(App)
})

1.2 Routennavigation

Vue Router bietet mehrere Möglichkeiten der Routennavigation, darunter die Verwendung des Router-Link-Tags zum Navigieren, das Springen von Seiten, das Warten auf den Abschluss der Navigation usw .

Durch die Verwendung des Router-Link-Tags in einer Komponente kann die Routennavigation einfach implementiert werden, wie unten gezeigt:

<router-link to="/home">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/contact">联系我们</router-link>

Darüber hinaus kann die programmatische Navigation auch zum Implementieren von Routensprüngen verwendet werden, wie unten gezeigt:

// 基本路由跳转
this.$router.push('/home')

// 带参数的路由跳转
this.$router.push({
  name: 'about',
  params: {
    id: 20,
    name: '张三'
  }
})

// 跳转后执行异步操作
this.$router.push('/about', () => {
  console.log('路由跳转完成')
})

// 返回前一个路由
this.$router.go(-1)

// 返回到命名路由
this.$router.push({
  name: 'home'
})

1.3 Routenverschachtelung

Vue Router unterstützt die Konfiguration von mehrstufigem verschachteltem Routing, wodurch eine komplexere Routing-Steuerung und -Verwaltung erreicht werden kann. Sie können beispielsweise Unterrouten und verschachtelte Unterrouten unter einer übergeordneten Route definieren, wie unten gezeigt:

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue'),
  children: [{
    path: 'intro',
    name: 'about-intro',
    component: () => import('./pages/AboutIntro.vue')
  }, {
    path: 'contact',
    name: 'about-contact',
    component: () => import('./pages/AboutContact.vue')
  }]
}]

In der Routing-Komponente können Sie das Tag verwenden, um die Unterroute zu belegen. Die übergeordnete Route ist eine Komponente und die untergeordnete Route wird im Tag gerendert, wie unten gezeigt:

<template>
  <div>
    <h2>关于我们</h2>
    <ul>
      <li><router-link :to="{ name: 'about-intro' }">公司简介</router-link></li>
      <li><router-link :to="{ name: 'about-contact' }">联系我们</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

Zusätzlich zu den grundlegenden Routing-Verwaltungsfunktionen bietet Vue Der Router bietet auch einige erweiterte Funktionen, wie z. B. Routenparameterübergabe, Routenschutz, dynamisches Routing usw. In diesem Abschnitt beschreiben wir die Verwendung und Implementierung dieser Funktionen.

2.1 Routing-Parameter

In der tatsächlichen Entwicklung ist es normalerweise erforderlich, einige Parameter an die Routing-Komponente zu übergeben, z. B. die Informationen des aktuell angemeldeten Benutzers, die Artikelliste usw. In Vue Router können Parameter über props-Attribute übergeben werden.

Wie unten gezeigt, verwenden wir das Props-Attribut, um Parameter beim Definieren der Route zu übergeben:

const routes = [
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
]

Setzen Sie in der Routing-Komponente props auf true, um die Routing-Parameter als Props-Attribut der Komponente zu übergeben. Beispiel:

<template>
  <div>
    <h2>User Details</h2>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

Zu diesem Zeitpunkt werden die Routing-Parameter als Benutzerattribut an die Benutzerkomponente übergeben, und die Komponente kann diese Parameter über this.user abrufen.

2.2 Route Guard

Route Guard ist eine wichtige Funktion von Vue Router, die während des Routensprungprozesses Vorgänge wie Berechtigungsüberprüfung und Anmeldebeurteilung ausführen kann. Vue Router bietet drei Arten von Routenwächtern: globale Wächter, routenexklusive Wächter und komponenteninterne Wächter.

Zu den globalen Wachen gehören beforeEach, beforeResolve und afterEach, die vor dem Routing-Sprung, nach erfolgreichem Sprung und nach Abschluss des gesamten Routing-Prozesses abgefangen werden. Zum Beispiel:

// 路由跳转前进行权限验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (authService.isAuthenticated()) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

Der exklusive Routenschutz kann beim Definieren der Route oder innerhalb der Komponente konfiguriert werden. Zum Beispiel:

const router = new VueRouter({
  routes: [{
      path: '/admin',
      component: Admin,
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          beforeEnter: (to, from, next) => {
            if (authService.isAdmin()) {
              next()
            } else {
              next({
                name: 'login'
              })
            }
          }
        }]
      }]
 })

Die Wächter innerhalb der Komponente sind die Funktionen beforeRouteEnter, beforeRouteUpdate und beforeRouteLeave, die in der Routing-Komponente definiert sind. Zum Beispiel:

export default {
  beforeRouteEnter(to, from, next) {
    console.log('进入路由组件')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('更新路由组件')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('离开路由组件')
    next()
  }
}

2.3 Dynamisches Routing

Dynamisches Routing bezieht sich auf die Technologie des dynamischen Abgleichs von Routen basierend auf URL-Parametern. Vue Router bietet dynamische Matching-Funktionen basierend auf Routing-Parametern und kann Routing-Sprünge und Komponenten-Rendering basierend auf verschiedenen Parametern durchführen.

Beim Definieren einer Route können Sie beispielsweise Parameter angeben, indem Sie den Doppelpunkt „:“ verwenden, wie unten gezeigt:

const routes = [
  {
    path: '/posts/:postId',
    component: Post,
    props: true
  }
]

Innerhalb der Komponente können Sie die Routenparameter über this.$route.params abrufen, wie unten gezeigt:

export default {
  mounted() {
    console.log('PostComponent: ' + this.$route.params.postId)
  }
}

Beim Routing können Sie die Methode $router.push verwenden, um einen dynamischen Routenabgleich durchzuführen, zum Beispiel:

this.$router.push({
  path: '/posts/' + id
})

III Zusammenfassung: Dieser Artikel stellt die grundlegende Verwendung und erweiterte Funktionen von Vue Router vor, einschließlich Routennavigation und Route Verschachtelung, Routing-Parameter, Routing-Guards und dynamisches Routing usw. Vue Router ist ein wichtiger Routing-Manager in Vue.js, der uns dabei helfen kann, die Routing-Steuerung und die Verwaltung von Front-End-Anwendungen besser zu implementieren. Ich hoffe, dieser Artikel kann Sie inspirieren und Ihnen helfen, die Vue-Router-Technologie besser für die Entwicklung einzusetzen.

Das obige ist der detaillierte Inhalt vonRouting-Steuerungs- und Verwaltungstechnologie in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!