Bagaimana untuk menukar parameter bar alamat melalui penghalaan Vue

Vue ialah rangka kerja JavaScript yang sangat popular yang menyediakan banyak ciri yang mudah untuk pembangun. Antaranya, Penghala Vue ialah submodul Vue dan bertanggungjawab menguruskan hubungan pemetaan antara pandangan dan alamat. Menggunakan penghalaan Vue, kami boleh dengan mudah memetakan pandangan berbeza ke alamat URL yang berbeza. Artikel ini akan memperkenalkan cara menukar parameter bar alamat melalui penghalaan Vue.

1. Pasang Vue Router

Mula-mula, kita perlu memasang Vue Router. Dalam terminal, masukkan arahan berikut untuk memasang:

npm install vue-router --save

Jika anda menggunakan pengurus pakej Benang, anda boleh menggunakan arahan berikut untuk memasang:

yarn add vue-router

2. Cipta contoh Penghala Vue

Dalam fail kemasukan aplikasi, kita perlu mencipta tika Penghala Vue. Berikut ialah contoh asas:

import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage,
    },
  ],
});

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

Dalam kod di atas, kami mentakrifkan dua laluan: '/' sepadan dengan komponen HomePage dan '/about' sepadan dengan komponen AboutPage. Kedua-dua laluan mempunyai nama yang mana kami boleh merujuknya dalam kod kami.

3. Tukar parameter bar alamat

Dalam Vue Router, kita boleh mendapatkan maklumat laluan semasa melalui objek $route, termasuk laluan laluan, parameter, nama, dsb. . Kita boleh menggunakan objek $route untuk menukar parameter bar alamat. Berikut ialah contoh:

<script>
export default {
  methods: {
    changeParam() {
      this.$router.push({ name: 'about', params: { id: 1 } });
    },
  },
};
</script>

Dalam contoh ini, kami mentakrifkan kaedah bernama changeParam, di mana kami menggunakan kaedah $router.push untuk menukar parameter bar alamat. Kaedah ini menerima objek yang mengandungi nama laluan dan parameter sebagai parameter. Dalam contoh ini, kami menetapkan nama laluan kepada 'about' dan parameter kepada {id: 1}. Ini bermakna bahawa kita akan melompat ke laluan 'tentang' dan memberikannya parameter yang dipanggil 'id' dengan nilai 1.

4. Dapatkan parameter bar alamat

Selain menukar parameter bar alamat, kami juga boleh mendapatkan parameter bar alamat. Berikut ialah contoh:

<script>
export default {
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};
</script>

Dalam contoh ini, kami mentakrifkan sifat terkira yang dipanggil id. Dalam sifat yang dikira ini, kami menggunakan $route.params.id untuk mendapatkan parameter bernama 'id' dalam bar alamat.

Dengan langkah ini, kami boleh menukar parameter bar alamat dan mendapatkan parameter dalam bar alamat dengan mudah. Dengan cara ini, kami boleh melaksanakan lompatan halaman yang lebih maju dan pemindahan data dalam aplikasi Vue.

Atas ialah kandungan terperinci Bagaimana untuk menukar parameter bar alamat melalui penghalaan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!