Bagaimana untuk melihat susunan halaman dalam vue

Vue ialah rangka kerja JavaScript yang sangat popular, disukai oleh ramai pembangun kerana ciri yang cekap dan fleksibel serta API yang ringkas dan mudah digunakan. Dalam Vue, tindanan halaman merujuk kepada struktur tindanan semua halaman yang diberikan dalam penyemak imbas, yang digunakan untuk merekodkan sejarah penyemakan imbas dan melompat rekod. Pengurusan tindanan halaman memainkan peranan penting dalam lonjakan halaman dan interaksi pengguna. Jadi, bagaimana untuk melihat susunan halaman? Artikel ini akan memperkenalkan secara terperinci cara melihat susunan halaman dalam Vue.

1. Vue Router

Vue Router ialah pengurus penghalaan rasmi Vue, yang boleh mengurus penghalaan dan lompatan tapak web dengan mudah, dan juga boleh melihat susunan halaman dengan mudah . Vue Router menyediakan $router harta global, yang boleh diakses dalam komponen. Maklumat penghalaan halaman semasa boleh diperolehi melalui $router, dan maklumat yang berkaitan timbunan halaman boleh diperolehi dalam maklumat penghalaan.

Anda boleh mengakses objek $router dalam komponen melalui kod berikut:

this.$router

Anda boleh mendapatkan semua maklumat laluan semasa melalui $router, termasuk:

• laluan : Laluan laluan semasa
• params: Parameter laluan semasa
• pertanyaan: Parameter pertanyaan laluan semasa
• nama: Nama laluan semasa
• meta: Metadata laluan semasa

Untuk tindanan halaman, anda boleh mendapatkan kedudukan halaman semasa dalam tindanan halaman melalui kod berikut:

const routeIndex = this.$router.history.current.index; 

Dapatkan kedudukan halaman semasa dalam susunan halaman Selepas itu, anda boleh mendapatkan maklumat penghalaan halaman sebelumnya atau halaman seterusnya berdasarkan maklumat lokasi, yang dicapai melalui kod berikut:

const prevRoute = this.$router.history.get(routeIndex-1);
const nextRoute = this.$router.history.get(routeIndex+1);

2. Vuex

Vuex ialah versi rasmi pengurus negeri Vue yang boleh mengurus keadaan dan data aplikasi dengan mudah. Dalam Vuex, anda boleh menggunakan pengurusan negeri untuk merekod maklumat tindanan halaman. Anda boleh menentukan tatasusunan dalam Vuex untuk menyimpan tindanan halaman, dan kemudian mengakses tindanan halaman melalui fungsi tambahan Vuex dalam komponen. Kod berikut menunjukkan cara menyimpan maklumat tindanan halaman dalam Vuex.

const store = new Vuex.Store({
  state: {
    pageStack: [],
  },
  mutations: {
    pushPage (state, page) {
      state.pageStack.push(page);
    },
    popPage (state) {
      state.pageStack.pop();
    },
    clearPageStack (state) {
      state.pageStack = [];
    }
  }
});

Dalam komponen, anda boleh mengakses maklumat tindanan halaman yang disimpan dalam Vuex melalui kod berikut:

this.$store.state.pageStack

Anda juga boleh mengakses maklumat tindanan halaman melalui fungsi tambahan, contohnya:

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      pageStack: state => state.pageStack
    })
  }
}

3. window.history

Dalam penyemak imbas, objek tetingkap menyediakan atribut sejarah, yang melaluinya maklumat tindanan halaman boleh diakses. Melalui sifat window.history.length, anda boleh mendapatkan panjang susunan halaman, iaitu bilangan halaman yang telah dilawati dalam penyemak imbas.

Kod berikut menunjukkan cara untuk mengakses maklumat tindanan halaman melalui window.history:

window.history.length //获取页面栈的长度
window.history.back() //后退到上一页
window.history.forward() //前进到下一页

Gunakan window.history.back() untuk kembali ke halaman sebelumnya dan dapatkan halaman sebelumnya di maklumat capaian masa yang sama. Gunakan window.history.forward() untuk maju ke halaman seterusnya dan mendapatkan maklumat akses untuk halaman seterusnya.

Ringkasan:

Terdapat banyak cara untuk melihat tindanan halaman dalam Vue, termasuk Vue Router, Vuex dan window.history. Semasa pembangunan, pembangun boleh memilih kaedah yang berbeza untuk melihat susunan halaman mengikut keperluan yang berbeza. Pada masa yang sama, memahami pengetahuan yang berkaitan tentang susunan halaman juga akan membantu pembangun mempunyai pemahaman yang lebih mendalam tentang pengurusan penghalaan dan pengurusan keadaan Vue, supaya dapat membangunkan aplikasi Vue dengan lebih cekap.

Atas ialah kandungan terperinci Bagaimana untuk melihat susunan halaman dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!