Vue erhält verschiedene Navigationsleisten mit unterschiedlichen Identitäten

Vue ist ein beliebtes Front-End-Framework zum Erstellen von Single-Page-Anwendungen mit einwandfreien Datenbindungsfunktionen und leicht zu erlernender Syntax. In der tatsächlichen Entwicklung ist es häufig erforderlich, je nach Benutzeridentität unterschiedliche Navigationsleisten zu laden. In diesem Artikel wird erläutert, wie Sie die Funktion zum Abrufen verschiedener Navigationsleisten basierend auf unterschiedlichen Identitäten in Vue implementieren.

Voraussetzungen

In diesem Artikel wird davon ausgegangen, dass Sie bereits mit den Grundlagen von Vue.js und dem Webpack-Paketierungstool vertraut sind. Wenn Sie nicht viel über diese Inhalte wissen, empfiehlt es sich, zunächst entsprechende Kurse zu belegen.

Anforderungen bestätigen

Bevor wir mit dem Schreiben von Code beginnen, müssen wir unsere Anforderungen klären. Laden Sie je nach Benutzeridentität unterschiedliche Navigationsleisten. Zuerst müssen wir eine Navigationsleistenkomponente erstellen und dann verschiedene Komponenten entsprechend unterschiedlicher Benutzeridentitäten laden.

Navigationsleistenkomponente erstellen

Erstellen Sie eine Komponente mit dem Namen Navigation.vue, in der wir den Stil und die Layoutlogik der Navigationsleiste definieren. Der spezifische Code lautet wie folgt:

<template>
  <div>
    <nav>
      <ul>
        <li>
          <router-link to="/">首页</router-link>
        </li>
        <li>
          <router-link to="/products">产品</router-link>
        </li>
        <li>
          <router-link to="/about">关于我们</router-link>
        </li>
        <li v-if="isAdmin">
          <router-link to="/admin">管理后台</router-link>
        </li>
        <li>
          <button @click="logout">退出</button>
        </li>
      </ul>
    </nav>
  </div>
</template>

Im obigen Code verwenden wir die v-if-Direktive in Vue.js, um die Anzeige der Komponente zu steuern. Das Admin-Backend-Menü wird nur dann in der Navigationsleiste angezeigt, wenn der aktuelle Benutzer ein Administrator ist. Darüber hinaus haben wir der Navigationsleiste eine Schaltfläche zum Abmelden hinzugefügt, auf die Benutzer klicken können, um sich abzumelden. v-if 指令来控制组件的显示。只有当当前用户是管理员时，管理后台菜单才会显示在导航栏中。此外，我们还将一个退出按钮添加到导航栏中，用户可以通过单击该按钮退出登陆。

获取用户身份

我们需要先获取当前用户的身份信息。在这里，我们使用了一个假数据来代替真实的身份验证逻辑。

// App.vue
 
export default {
  data() {
    return {
      currentUser: {
        username: "test",
        role: "admin"
      }
    };
  },
 
  computed: {
    isAdmin() {
      return this.currentUser.role === "admin";
    }
  }
};

假设当前用户的身份是管理员，通过计算属性 isAdmin 来判断是否为管理员。 如果是管理员，则在导航栏中显示管理后台菜单，否则不显示。

将导航栏组件添加到布局中

最后，我们需要将导航栏组件添加到页面布局中。 在此期间，必须在 router-view 组件外包装 Navigation 组件，如下所示：

<template>
  <div>
    <Navigation />
    <router-view />
  </div>
</template>

当用户访问应用程序中的任何页面时，Navigation

rrreee

Das obige ist der detaillierte Inhalt vonVue erhält verschiedene Navigationsleisten mit unterschiedlichen Identitäten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!