vue ersetzt neue Route

Mit der Entwicklung von Vue entscheiden sich immer mehr Webanwendungen für die Verwendung von Vue als Front-End-Framework. Da die Anwendung erweitert und aktualisiert wird, müssen wir ständig neue Routen hinzufügen und alte Routen ersetzen. Wie kann man also das Routing in Vue ersetzen?

In Vue ist Vue Router unsere häufig verwendete Routing-Bibliothek. Vue Router ist der offiziell von Vue.js bereitgestellte Routing-Manager, der die Routing-Steuerung von SPA (Single Page Application) problemlos realisieren kann. Bei der Verwendung von Vue Router müssen wir die folgenden drei wichtigen Konzepte beherrschen:

1. Router
   Router ist eine Instanz von Vue Router, die für die Erstellung von Vue Router verantwortlich ist. Wenn Sie eine Route definieren, müssen Sie eine Instanz mit neuen Router(optionen) erstellen. In Vue schreiben wir die Router-Instanz normalerweise separat in eine router.js-Datei und führen sie dann in main.js in die Vue-Instanz ein und mounten sie.
2. Routes
   Routes ist ein Array, wobei jede Route einem URL-Pfad und einer Komponente entspricht. Wenn die URL mit der Route übereinstimmt, wird die entsprechende Komponente im 975b587bf85a482ea10b0a28848e78a4-Tag gerendert. Jedes Route-Objekt muss mindestens zwei Eigenschaften enthalten: Pfad und Komponente.
3. Router-Ansicht
   Router-Ansicht ist eine von Vue Router bereitgestellte Komponente, die zum Rendern der übereinstimmenden Komponente verwendet wird. In App.vue müssen wir das Tag 975b587bf85a482ea10b0a28848e78a4 hinzufügen, um die entsprechende Komponentenkomponente zu hosten.

Als nächstes zeigen wir, wie man Routen in Vue Router ersetzt. Nehmen wir zunächst an, dass unsere Anwendung aus drei Seiten besteht: der Startseite (Home), der Seite mit den Benutzerdetails (UserDetail) und der Seite „Über uns“ (AboutUs). Jetzt müssen wir die Benutzerdetailseite in die Benutzerlistenseite (UserList) ändern und die entsprechenden Routen ersetzen.

Im ersten Schritt müssen wir die entsprechende Route in der Datei router.js ändern:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import UserList from '@/views/UserList.vue';
import AboutUs from '@/views/AboutUs.vue';

Vue.use(Router);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/userList',
    name: 'userList',
    component: UserList,
  },
  {
    path: '/aboutUs',
    name: 'aboutUs',
    component: AboutUs,
  },
];

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

Hier ersetzen wir die UserDetail-Komponente durch die UserList-Komponente und ändern den entsprechenden Pfad. Es ist zu beachten, dass wir nach der Änderung der Routing-Konfiguration die Vue-Anwendung neu starten müssen, damit die Änderung wirksam wird.

Im zweiten Schritt müssen wir das Router-Link-Tag in der Vue-Komponente verwenden, um Routing-Sprünge durchzuführen. In unserer Anwendung müssen wir einen Link zur Benutzerliste auf der Startseite hinzufügen, damit Benutzer direkt zur Benutzerlistenseite springen können.

Ändern Sie die Home.vue-Seite, fügen Sie ein Router-Link-Tag hinzu und legen Sie das entsprechende to-Attribut fest:

<template>
  <div>
    <h1>欢迎访问我的应用</h1>
    <router-link to="/userList">用户列表</router-link>
    <router-link to="/aboutUs">关于我们</router-link>
  </div>
</template>

<script>
export default {};
</script>

Hier setzen wir das to-Attribut auf „/userList“, was bedeutet, dass der Benutzer zur Benutzerliste springt Seite, nachdem Sie auf den Link geklickt haben.

Im dritten Schritt müssen wir der UserList.vue-Komponente relevante Geschäftslogik hinzufügen. Hier gehen wir davon aus, dass die Benutzerlisteninformationen in der UserList-Komponente angezeigt werden:

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="(user, index) in userList" :key="index">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          name: '小明',
          age: 20,
          gender: '男',
        },
        {
          name: '小红',
          age: 21,
          gender: '女',
        },
        {
          name: '小华',
          age: 22,
          gender: '男',
        },
      ],
    };
  },
};
</script>

Hier verwenden wir die v-for-Direktive, um jedes Benutzerobjekt in der userList in ein li-Element zu rendern.

Durch die oben genannten Schritte haben wir die Seite mit den Benutzerdetails erfolgreich durch die Seite mit der Benutzerliste ersetzt und den entsprechenden Link zur Startseite hinzugefügt. In der tatsächlichen Entwicklung müssen wir Routen entsprechend den spezifischen Geschäftsanforderungen angemessen entwerfen und ersetzen und gleichzeitig auf die zugehörigen Konzepte und die Verwendung von Vue Router achten, um den normalen Betrieb der Anwendung sicherzustellen.

Das obige ist der detaillierte Inhalt vonvue ersetzt neue Route. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!