Bagaimanakah Vue tahu bahawa bar alamat telah berubah?

Sebagai rangka kerja bahagian hadapan yang popular, Vue.js (pendek kata Vue) menyediakan pembangun beberapa alatan pengurusan penghalaan yang fleksibel untuk memudahkan penukaran dan kawalan halaman dalam aplikasi satu halaman.

Walau bagaimanapun, kadangkala kami perlu membuat beberapa respons apabila alamat penghalaan berubah Contohnya, kami ingin memaparkan kandungan yang berbeza berdasarkan parameter dalam alamat atau memaparkan bar navigasi yang berbeza berdasarkan laluan yang berbeza.

Jadi, bagaimana untuk memantau perubahan dalam bar alamat dalam Vue? Artikel ini akan memperkenalkan dua kaedah:

1 Gunakan pengawal laluan Vue-Router

Vue-Router disediakan secara rasmi oleh Vue.js untuk mengurus pemalam penghalaan SPA (Single-Page Application). Melalui Vue-Router, kami boleh mengawal penghalaan merentas komponen dengan mudah.

Vue-Router menyediakan fungsi pengawal penghalaan ([pengawal navigasi](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)), yang merupakan ciri yang paling berkuasa daripada Vue-Router Salah satu ciri yang berguna. Pengawal laluan ialah fungsi yang mengawal tingkah laku navigasi laluan.

Dalam pengawal laluan, kita boleh menggunakan fungsi beforeEach untuk memantau perubahan laluan. Apabila laluan berubah, fungsi ini akan dipanggil, menghantar tiga parameter to, from dan next.

to ialah laluan sasaran untuk melompat ke, from ialah laluan semasa dan next ialah fungsi yang digunakan untuk mengawal langkah seterusnya. Apabila kita memanggil fungsi next, laluan akan terus melompat.

Sebagai contoh, katakan kami ingin memantau perubahan laluan dan memaparkan kandungan teks yang berbeza berdasarkan parameter laluan id:

// 路由定义
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/post/:id',
      component: Post
    }
  ]
})

// Post组件定义
<template>
  <div>
    {{ postContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      postContent: ''
    }
  },
  mounted() {
    this.fetchPostContent()
  },
  methods: {
    async fetchPostContent() {
      const id = this.$route.params.id // 从路由参数中获取id
      this.postContent = await fetch('/api/posts/' + id).then(response => response.json())
    }
  }
}
</script>

// 路由守卫监听
router.beforeEach((to, from, next) => {
  const id = to.params.id
  if (id !== undefined) { // 如果传入id参数，则修改文本内容
    next()
  } else { // 否则不进行跳转
    next(false)
  }
})

Dalam pengawal laluan, kami melepasi to.params.id Dapatkan id parameter penghalaan dan tentukan sama ada ia wujud. Jika ada, teruskan melompat, jika tidak jangan melompat.

Dengan cara ini, apabila kita memasukkan /post/1 dalam bar alamat, komponen Post akan mendapat kandungan catatan blog dengan id 1 dan memaparkannya pada halaman. Apabila kita memasukkan /post/ dalam bar alamat, lompatan tidak akan berlaku.

Menggunakan pengawal laluan Vue-Router ialah kaedah mudah dan fleksibel yang boleh memantau perubahan dalam bar alamat dengan mudah.

2. Gunakan atribut jam tangan Vue

Selain Vue-Router, Vue sendiri juga menyediakan mekanisme pengikatan data reaktif. Dengan memantau perubahan data, kami boleh membuat beberapa respons apabila mengubah laluan.

Mekanisme responsif dalam Vue dilaksanakan melalui atribut watch. Sifat ini digunakan untuk memantau perubahan data pada contoh Vue dan melaksanakan fungsi panggil balik yang sepadan apabila data berubah.

Kami boleh memantau perubahan dalam parameter penghalaan dan melaksanakan operasi yang sepadan apabila parameter berubah. Contohnya:

// Post组件定义
<template>
  <div>
    {{ postContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      postContent: ''
    }
  },
  watch: {
    // 监听路由参数id的变化
    '$route.params.id'(newId, oldId) {
      this.fetchPostContent(newId)
    }
  },
  mounted() {
    this.fetchPostContent(this.$route.params.id)
  },
  methods: {
    async fetchPostContent(id) {
      this.postContent = await fetch('/api/posts/' + id).then(response => response.json())
    }
  }
}
</script>

Dalam contoh ini, kami mendengar perubahan dalam $route.params.id dan melaksanakan fungsi panggil balik yang sepadan fetchPostContent apabila id berubah. Apabila memasang buat kali pertama, kami juga perlu melaksanakan fungsi fetchPostContent secara manual sekali untuk mendapatkan kandungan catatan blog awal.

Menggunakan atribut jam tangan Vue boleh membantu kami memantau perubahan dalam parameter penghalaan dan mengawal bar alamat.

Ringkasnya, Vue menyediakan pelbagai kaedah untuk mengawal tingkah laku penghalaan dalam aplikasi satu halaman Pembangun boleh memilih kaedah yang sesuai dengan keperluan mereka sendiri.

Atas ialah kandungan terperinci Bagaimanakah Vue tahu bahawa bar alamat telah berubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!