Detaillierte Erklärung der wunderbaren Verwendung von Vue-Router in Vue

Vue ist derzeit eines der beliebtesten Front-End-Frameworks. Es ist nicht nur einfach und benutzerfreundlich, sondern verfügt auch über eine starke Skalierbarkeit. Eines der Plug-Ins, auf die es sich zu achten lohnt. vue-router ist das offizielle Routing-Plug-in für Vue. Es kann die Routing-Navigation in Vue-Anwendungen besser steuern, die Beziehung zwischen Routing und Komponenten klarer machen und das interaktive Erlebnis des Benutzers verbessern. In diesem Artikel wird die Verwendung des Vue-Routers und seine wunderbaren Einsatzmöglichkeiten ausführlich erläutert.

1. Installation und Verwendung

Bevor Sie den Vue-Router verwenden, müssen Sie ihn zuerst installieren. Sie können den npm-Paketmanager verwenden, um das Vue-Router-Plugin zu installieren. Der Installationsbefehl lautet wie folgt:

npm install vue-router

Führen Sie nach Abschluss der Installation vue-router in der Datei main.js ein und verwenden Sie ihn:

import VueRouter from 'vue-router'
import routes from './router'

const router = new VueRouter({
      routes
})

new Vue({
      el: '#app',
      router,
      render: h => h(App)
})

Unter anderem gibt der Parameter „Routes“ die Routing-Konfiguration an, die je nach Projekt geändert werden kann Bedürfnisse. Übergeben Sie dann den Router-Parameter im Vue-Instanziierungsobjekt, um die Routing-Funktion zu aktivieren.

2. Grundkonfiguration

Die Routing-Konfiguration umfasst zwei Teile: Routing-Tabelle und Routing-Komponente. Die Routing-Tabelle wird hauptsächlich zum Konfigurieren von Routing-Pfaden und entsprechenden Komponenten verwendet. Die Routing-Komponente ist die Komponentenansicht des entsprechenden Routing-Pfads.

Erstellen Sie die Datei router.js im Verzeichnis src und definieren Sie die Routing-Tabelle und die Komponenten. Wie folgt:

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    }
]

Geben Sie dann die Routing-Konfiguration in main.js ein und übergeben Sie sie an die VueRouter-Instanz. Unter diesen wird der Routing-Pfad mithilfe des Pfadattributs konfiguriert, und das Komponentenattribut gibt die entsprechende Routing-Komponente an.

3. Parameterübergabe

Vue-Router unterstützt auch die Übergabe von Parametern, und die übergebenen Parameter können über das $route-Objekt abgerufen werden.

1. Pfadübergabeparameter

Pfadübergabeparameter bedeutet, Parameter als Teil des Routingpfads zu platzieren, zum Beispiel:

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

Wenn der Benutzer auf /user/1 zugreift, übergibt das Routing 1 als Parameter userId an die Benutzerkomponente .

2. Übergabe von Abfrageparametern

Übergabe von Abfrageparametern bedeutet, dass die Parameter nach dem Routing-Pfad in Form von Schlüssel-Wert-Paaren platziert werden, getrennt durch Fragezeichen?, und aufeinanderfolgende Schlüssel-Wert-Paare werden mit & verbunden, zum Beispiel:

{
  path: '/user',
  name: 'user',
  component: User
}

Wenn ein Benutzer auf /user?id=1&name=john zugreift, übergibt die Route {id: 1, name: 'john'} als Abfrageparameter an die Benutzerkomponente.

4. Umleitung und verschachteltes Routing

1. Umleiten

Umleiten bedeutet, automatisch zu einem anderen Pfad zu springen, wenn der Benutzer auf einen bestimmten Pfad im Browser zugreift. Der folgende Code implementiert die Funktion des automatischen Springens vom Pfad /about zum Pfad /home:

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    redirect: '/home'
  }
]

2. Verschachteltes Routing

Verschachteltes Routing bezieht sich auf Routing, bei dem untergeordnete Komponenten in übergeordneten Komponenten verwendet werden. Beispielsweise muss in einer Seite mit einer festen Struktur am Kopf und am Ende die Komponente „Inhalt“ verschachtelt werden. Die dreischichtige Struktur sieht so aus:

header
 / 
L   R
    |
content
    |
footer

Verschachtelte Routen müssen die Funktion verwenden. Tag innerhalb der übergeordneten Komponente, um den Platz zu belegen und die untergeordnete Routing-Tabelle innerhalb der Routing-Tabelle der übergeordneten Komponente zu definieren. Beispiel:

const home = {
  template: `
    <div>
      <h2>Home</h2>
      <router-view></router-view>
    </div>
  `
}

const about = {
  template: '<div>About</div>'
}

const contact = {
  template: '<div>Contact</div>'
}

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

verwendet das -Tag in der Home-Komponente als Platzhalter für die Unterkomponenten „about“ und „content“. In der Routing-Tabelle enthält die von der übergeordneten Komponente „home“ konfigurierte Sub-Routing-Tabelle zwei Sub-Routing-Pfade „about“ und „content“.

5. Routenschutz

1. Globaler Schutz

Der globale Schutz wird vor dem Routing-Wechsel ausgelöst, wobei beforeEach() der globale Vorschutz ist, der Vorgänge wie Berechtigungsüberprüfung und Anmeldeüberprüfung durchführen kann.

router.beforeEach((to, from, next) => {
  // 验证用户是否登陆 
  if(to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('token');

    if(token === null || token === '') {
      next('/login');
    } else {
      next();
    }
  }
})

Der globale Post-Guard dient zum Auslösen nach dem Routing-Umschalten und zur Verarbeitung von Vorgängen wie dem Fortschrittsbalken beim Laden der Seite.

2. Route Exclusive Guard

Route Exclusive Guard wird verwendet, um eine spezifische Verarbeitung für eine bestimmte Route durchzuführen. Fügen Sie einfach die beforeEnter-Attributdefinition in der Routing-Konfiguration hinzu.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: admin,
      beforeEnter: (to, from, next) => {
        // 验证是否为管理员账户
        let token = localStorage.getItem('token');
        if(token === 'admin') {
          next();
        } else {
          next('/');
        }
      }
    }
  ]
})

3. In-Komponenten-Schutz

In-Komponenten-Schutz wird hauptsächlich zur Verarbeitung der aktuellen Komponente verwendet. Einschließlich: drei Schutzfunktionen: beforeRouteEnter, beforeRouteUpdate und beforeRouteLeave.

Die Funktion beforeRouteEnter wird ausgelöst, bevor die Komponente eintritt. In dieser Funktion kann nicht direkt auf die Komponenteninstanz zugegriffen werden, aber die Komponenteninstanz kann zur Verarbeitung durch die nächste Rückruffunktion geleitet werden.

export default {
  data () {
    return {
      user: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get(`/api/user/${to.params.id}`).then(response => {
      next(vm => vm.setUser(response.data.user))
    })
  },
  methods: {
    setUser (user) {
      this.user = user
    }
  }
}

beforeRouteUpdate-Funktion Da Routing-Sprünge zwischen Komponenten keine Instanzen neu erstellen, müssen Sie für die Verarbeitung die beforeRouteUpdate-Funktion verwenden. Die Funktion

export default {
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  },
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

beforeRouteLeave wird ausgelöst, wenn die Komponente verlassen werden soll, und wird zur Verarbeitung von Vorgängen wie nicht gespeicherten Formulardaten verwendet.

export default {
  beforeRouteLeave (to, from, next) {
    // 如果表单已保存或者页面没有修改，直接离开该页面
    if (this.saved || window.confirm('尚未保存，确定要离开吗？')) {
      next()
    } else {
      next(false)
    }
  }
}

6. Zusammenfassung

Die Verwendung des Vue-Router-Plug-Ins kann leistungsstarke Steuerungsfunktionen für die Routing-Navigation in Vue-Anwendungen bereitstellen und so das interaktive Erlebnis des Benutzers verbessern. In diesem Artikel werden die Grundkonfiguration, Parameterübergabe, Umleitung, verschachteltes Routing und Routing-Guards von Vue-Router vorgestellt, die Entwicklern dabei helfen können, das Vue-Router-Plug-In besser zu nutzen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der wunderbaren Verwendung von Vue-Router in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!