Vue-Router: Bagaimana untuk menggunakan navigasi program dalam aplikasi Vue?

Vue-Router: Bagaimana untuk menggunakan navigasi program dalam aplikasi Vue?

Vue-Router ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue.js. Ia membolehkan kami menguruskan hubungan pemetaan laluan antara halaman dalam aplikasi dan mencapai kesan aplikasi satu halaman. Dalam Vue-Router, navigasi dibahagikan kepada dua jenis: navigasi deklaratif dan navigasi program.

Navigasi deklaratif ditakrifkan dengan menggunakan komponen b988a8fd72e5e0e42afffd18f951b277 Kami boleh menggunakan atribut to dalam b988a8fd72e5e0e42afffd18f951b277 untuk menentukan pautan navigasi dan Vue-Router akan secara automatik memetakan atribut kepada laluan dalam aplikasi.

Navigasi terprogram melaksanakan navigasi dengan menulis kod JavaScript. Ia membolehkan pembangun memanggil terus API yang disediakan oleh Vue-Router dalam kod untuk melaksanakan navigasi halaman. Navigasi terprogram boleh menyediakan cara yang lebih fleksibel apabila navigasi dinamik dalam aplikasi Vue atau kawalan logik perniagaan dalam aplikasi diperlukan.

Di bawah, kami akan menggunakan beberapa contoh kod untuk menunjukkan kaedah pelaksanaan navigasi program Vue-Router.

1. Lompat ke laluan yang ditentukan

Untuk melompat ke laluan yang ditentukan, kita boleh menggunakan kaedah $router.push yang disediakan oleh Vue-Router. Kaedah ini menerima laluan atau laluan bernama sebagai parameter dan menavigasi ke laluan atau laluan yang ditentukan.

<template>
  <div>
    <button @click="goHome">返回主页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

Dalam kod di atas, kami menyediakan butang, dan apabila butang itu diklik, kaedah goHome dipanggil untuk menavigasi laluan ke halaman utama.

Sama seperti kaedah tolak, Vue-Router juga menyediakan kaedah $router.replace, yang boleh menggantikan terus URL semasa tanpa meninggalkan rekod sejarah. Ini digunakan apabila anda perlu melompat dari satu halaman ke halaman yang lain.

2. Lompat ke laluan sebelumnya

Apabila kita perlu melompat ke laluan sebelumnya, kita boleh menggunakan kaedah $router.back yang disediakan oleh Vue-Router. Kaedah ini menavigasi ke laluan sebelumnya dalam sejarah aplikasi.

<template>
  <div>
    <button @click="goBack">返回上一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.back()
    }
  }
}
</script>

3. Lompat ke laluan seterusnya

Sama seperti melompat ke laluan sebelumnya, kita boleh menggunakan kaedah $router.forward yang disediakan oleh Vue-Router untuk menavigasi ke laluan seterusnya dalam sejarah aplikasi.

<template>
  <div>
    <button @click="goForward">前往下一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goForward() {
      this.$router.forward()
    }
  }
}
</script>

4. Lompat ke laluan yang dinamakan

Dalam Vue-Router, kita boleh menetapkan nama untuk laluan tersebut. Jika kita perlu menavigasi ke laluan bernama, kita boleh menggunakan kaedah $router.push yang disediakan oleh Vue-Router dan memasukkan nama sebagai parameter.

<template>
  <div>
    <button @click="goToAbout">前往关于页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'about' })
    }
  }
}
</script>

Dalam kod di atas, kami menyediakan butang Apabila butang diklik, kaedah goToAbout dipanggil untuk menavigasi laluan ke halaman Perihal ditetapkan dengan memanggil konfigurasi penghalaan bernama Vue-. Penghala.

Ringkasan

Dalam Vue-Router, navigasi program menyediakan cara yang lebih fleksibel dan dinamik untuk mengurus laluan. Kita boleh menggunakan API yang disediakan oleh Vue-Router seperti $router.push, $router.replace, $router.back dan $router.forward untuk melompat. Pada masa yang sama, kami juga boleh menggunakan laluan bernama untuk navigasi. Apabila menggunakan navigasi terprogram, anda perlu sedar bahawa operasi navigasi boleh mencetuskan pemaparan semula halaman dan mengelakkan daripada menyebabkan tingkah laku yang tidak dijangka dalam operasi navigasi.

Atas ialah kandungan terperinci Vue-Router: Bagaimana untuk menggunakan navigasi program dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!