Vue memperoleh bar navigasi berbeza dengan identiti berbeza

Vue ialah rangka kerja bahagian hadapan yang popular untuk membina aplikasi satu halaman dengan keupayaan pengikatan data yang sempurna dan sintaks yang mudah dipelajari. Dalam pembangunan sebenar, selalunya perlu memuatkan bar navigasi yang berbeza berdasarkan identiti pengguna. Artikel ini akan memperkenalkan cara melaksanakan fungsi mendapatkan bar navigasi berbeza berdasarkan identiti berbeza dalam Vue.

Prasyarat

Artikel ini menganggap bahawa anda sudah biasa dengan asas Vue.js dan alat pembungkusan webpack. Jika anda tidak tahu banyak tentang kandungan ini, disyorkan untuk mengambil kursus yang berkaitan terlebih dahulu.

Sahkan keperluan

Sebelum kami mula menulis kod, kami perlu menjelaskan keperluan kami. Muatkan bar navigasi yang berbeza mengikut identiti pengguna yang berbeza. Pertama, kita perlu mencipta komponen bar navigasi, dan kemudian memuatkan komponen yang berbeza berdasarkan identiti pengguna yang berbeza.

Buat komponen bar navigasi

Buat komponen bernama Navigation.vue, di mana kami akan mentakrifkan logik gaya dan reka letak bar navigasi. Kod khusus adalah seperti berikut:

<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>

Dalam kod di atas, kami menggunakan arahan v-if dalam Vue.js untuk mengawal paparan komponen. Menu hujung belakang pentadbir akan muncul dalam bar navigasi hanya jika pengguna semasa ialah pentadbir. Selain itu, kami menambah butang log keluar pada bar navigasi yang pengguna boleh klik untuk log keluar.

Dapatkan identiti pengguna

Kita perlu mendapatkan maklumat identiti pengguna semasa terlebih dahulu. Di sini, kami menggunakan data palsu sebagai ganti logik pengesahan sebenar.

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

Anggap bahawa pengguna semasa ialah pentadbir, dan tentukan sama ada dia pentadbir dengan mengira atribut isAdmin. Jika anda seorang pentadbir, menu latar belakang pengurusan akan dipaparkan dalam bar navigasi, jika tidak, ia tidak akan dipaparkan.

Tambahkan komponen bar navigasi pada reka letak

Akhir sekali, kita perlu menambah komponen bar navigasi pada reka letak halaman. Sementara itu, komponen Navigasi mesti dililitkan pada komponen router-view, seperti yang ditunjukkan di bawah:

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

Apabila pengguna melawat mana-mana halaman dalam aplikasi, komponen Navigation akan dipaparkan di bahagian atas halaman tersebut.

Kesimpulan

Dalam artikel ini, kami menunjukkan cara mendapatkan bar navigasi berbeza berdasarkan identiti berbeza dalam Vue. Mula-mula, kami mencipta komponen Navigasi dan kemudian mengira menu yang dipaparkan berdasarkan identiti pengguna. Akhir sekali, tambahkan komponen Navigasi pada reka letak aplikasi anda.

Dalam pembangunan sebenar, kod dalam artikel ini mungkin perlu dilaraskan mengikut keperluan sebenar. Walau bagaimanapun, anda boleh melaksanakan fungsi identiti berbeza bagi bar navigasi dengan mudah menggunakan kaedah yang sama, menghasilkan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Vue memperoleh bar navigasi berbeza dengan identiti berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!