So konfigurieren Sie den Header, wenn Vue springt

Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Single-Page-Anwendungen (SPA). In Vue werden die Anwendungsnavigation und Seitensprünge durch Routing gesteuert. Wie konfiguriere ich den Header, wenn ein Benutzer über Vue-Routing zu einer Seite springt? In diesem Artikel wird detailliert beschrieben, wie der Header konfiguriert wird, wenn Vue-Routen springen.

Was ist Vue Router?

Vue Router ist die offizielle Routing-Management-Bibliothek von Vue. Sie kann Routen basierend auf URLs abgleichen und dann die entsprechenden Komponenten anzeigen. Vue Router kann uns beim Wechseln zwischen Seiten und beim Übergeben von Parametern helfen. Er kann auch einige erweiterte Funktionen implementieren, z. B. Routenwächter, verzögertes Laden von Routen usw.

Schritte zur Verwendung von Vue Router

Schritt 1: Erstellen Sie ein Vue-Projekt

Wenn Sie bereits Vue.js zum Erstellen des Projekts verwenden, können Sie diesen Schritt überspringen. Wenn Sie neu sind, installieren Sie bitte zuerst Vue.js. Informationen zu bestimmten Installationsmethoden finden Sie auf der offiziellen Website https://cn.vuejs.org/.

Schritt 2: Vue Router installieren

Wir können Vue Router über den npm-Paketmanager installieren. Geben Sie den folgenden Befehl ein:

$ npm install vue-router -save

Schritt 3: Erstellen Sie eine Vue Router-Instanz

Die Verwendung von Vue Router in Vue.js ist sehr einfach. Wir müssen lediglich eine Vue-Router-Instanz erstellen, die für die Verwaltung aller unserer Routen verantwortlich ist. Fügen Sie Vue Router in die Datei main.js ein und erstellen Sie eine Vue Router-Instanz wie folgt:

import Vue from 'vue'; // 导入Vue
import VueRouter from 'vue-router'; // 导入Vue Router
import App from './App.vue'; // 导入根组件
import routes from './routes'; // 导入路由配置

Vue.use(VueRouter); // 安装Vue Router

const router = new VueRouter({
  routes // 配置路由规则
});

new Vue({
  el: '#app',
  router, // 注入路由实例
  render: h => h(App) // 渲染根组件
});

Im obigen Code importieren wir zunächst Vue, Vue Router, App-Komponenten und Routing-Konfigurationsdateien.

Dann installieren wir Vue Router über Vue.use (VueRouter). Als nächstes erstellen wir über new VueRouter() eine Vue Router-Instanz und übergeben die Routing-Konfiguration an die Instanz.

Schließlich fügen wir die Routeninstanz in die Router-Option in der Root-Komponente ein. Auf diese Weise können wir die Vue Router-Instanz in unserer gesamten Anwendung verwenden.

Schritt 4: Routing-Regeln definieren

Das Definieren von Routing-Regeln in Vue Router ist sehr einfach. Wir müssen lediglich ein Array in der Routing-Konfigurationsdatei definieren, wie unten gezeigt:

import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';
import NotFound from './views/NotFound.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  },
  {
    path: '*',
    name: 'not-found',
    component: NotFound
  }
];

export default routes;

Im obigen Code definieren wir vier Routing-Regeln: „/“, „/about“, „/contact“, „“. Darunter bedeutet „/“ die Startseite und „“ die 404-Seite.

Schritt 5: Routing-Komponenten verwenden

In Vue Router kann jede Routing-Regel einer Komponente entsprechen. Wenn wir Routing-Regeln definieren, haben wir die Komponenten angegeben, die jeder Routing-Regel entsprechen. Jetzt müssen wir die Routing-Komponente in der App.vue-Komponente verwenden, um verschiedene Seiten anzuzeigen.

In App.vue verwenden wir das Tag , um die Komponenten anzuzeigen, die den aktuellen Routing-Regeln entsprechen, wie unten gezeigt:

<template>
  <div id="app">
    <header>
      <!-- 配置header -->
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Im obigen Code verwenden wir das Tag Mit Vue-Komponenten zeigt Vue dynamisch verschiedene Routing-Komponenten durch Routing-Regeln an. Sie können hier auch statischen HTML-Code und CSS-Stile hinzufügen, um den Header zu erstellen.

Schritt 6: Header konfigurieren

Vue Router stellt einen globalen Hook beforeEach() bereit, der ausgeführt wird, bevor die Route springt. Wir können den Header-Inhalt in diesem Hook dynamisch ändern.

Fügen Sie den folgenden Code zur Datei main.js hinzu:

router.beforeEach((to, from, next) => {
  const title = to.meta.title;

  if (title) {
    document.title = title;
  }

  next();
});

Im obigen Code ermitteln wir, ob das Meta-Attribut in der aktuellen Routing-Regel definiert ist. Wenn es definiert ist, wird der Titelwert im Meta-Attribut zugewiesen die Kopfzeile.

Zusammenfassung

In diesem Artikel wird detailliert beschrieben, wie der Header konfiguriert wird, wenn Vue Router springt. Wir können das von Vue Router bereitgestellte Tag verwenden, um Routing-Komponenten dynamisch anzuzeigen. Gleichzeitig können wir den Header-Inhalt im globalen Hook beforeEach() dynamisch ändern, um eine bessere Benutzererfahrung zu erzielen. Ich hoffe, dieser Artikel kann Ihnen bei der Konfiguration von Headern bei der Verwendung von Vue Router helfen.

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie den Header, wenn Vue springt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!