Bagaimanakah Vue mendapatkan nama laluan dan memuatkan data yang berbeza?

Dengan kemajuan berterusan teknologi pembangunan bahagian hadapan, semakin banyak rangka kerja dan perpustakaan bahagian hadapan digunakan secara meluas dalam pembangunan sebenar Antaranya, vue.js, sebagai salah satu rangka kerja bahagian hadapan yang popular, telah menjadi pilihan pertama banyak pembangun aplikasi web Salah satu rangka kerja. Dalam vue, bagaimana untuk memuatkan data yang berbeza mengikut nama laluan yang diperoleh selepas lompat laluan? Artikel ini akan memberikan kaedah pelaksanaan.

1. vue-router

Dalam dokumentasi rasmi vue, perpustakaan pengurus penghalaan vue-router diperkenalkan Apabila aplikasi perlu melakukan lompatan halaman yang kompleks dan pengurusan status, gunakannya vue -router boleh memberikan kami penyelesaian yang lebih baik. vue-router mempunyai fungsi yang berkuasa seperti pemuatan tak segerak, parameter penghalaan, cangkuk navigasi, dan penghalaan bersarang Kemunculannya juga memberikan kemudahan untuk pembinaan aplikasi Vue.

2. Lompat laluan dan pemindahan parameter

Dalam vue-router, kami biasanya menggunakan kaedah pautan penghala atau $router.push() untuk lompat laluan Intipati dua kaedah Lompatan ini dicapai dengan menukar alamat URL. Melepasi parameter semasa penghalaan lompatan juga sangat mudah Anda hanya perlu menambahkan pertanyaan atau parameter params pada pautan lompat.

Sebagai contoh, kami kini mempunyai konfigurasi penghalaan berikut:

const routes = [
  { path: '/home', component: Home },
  { path: '/detail', component: Detail },
  { path: '*', component: NotFound }
]

Pada masa yang sama, kami perlu lulus parameter id apabila melompat ke laluan terperinci Kami boleh melaksanakannya seperti ini:

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail', query: { id: 123 } })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail&#39;, query: { id: 123 } }">Detail</router-link>

Bagaimana untuk mendapatkan parameter yang diluluskan oleh laluan dalam komponen terperinci? Kita boleh melakukan ini:

this.$route.query.id

Perlu diperhatikan di sini bahawa jika ia adalah parameter params, kaedah penggunaannya berbeza sedikit. Sebagai tambahan kepada keperluan untuk menggunakan parameter params semasa melompat pautan, laluan juga mesti diubah suai untuk memasukkan parameter dinamik semasa mengkonfigurasi laluan Contohnya adalah seperti berikut:

const routes = [
  { path: '/home', component: Home },
  { path: '/detail/:id', component: Detail },
  { path: '*', component: NotFound }
]

Apabila melompat pautan, kita perlu menukar. params Nama parameter yang terkandung dalam objek sepadan dengan nama parameter yang diisytiharkan dalam konfigurasi penghalaan Contohnya adalah seperti berikut:

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail/123' })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail/123&#39; }">Detail</router-link>

Apabila mendapatkan parameter yang diluluskan oleh laluan dalam komponen terperinci, anda hanya perlu. untuk menggunakan $route.params.id Itu sahaja.

3. Paparan data dinamik

Dalam aplikasi praktikal, kadangkala kita perlu memuatkan data yang berbeza secara dinamik berdasarkan nama laluan. Biasanya, kita boleh mendapatkan data berdasarkan nama laluan dan menjadikannya dalam fungsi cangkuk yang dibuat atau dipasang komponen. Contohnya:

export default {
  name: 'Detail',
  data() {
    return {
      detailData: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const name = this.$route.name
      if(name === 'detailA') {
        // 加载数据A
        axios.get('/api/detailA').then(res => {
          this.detailData = res.data
        })
      } else if(name === 'detailB') {
        // 加载数据B
        axios.get('/api/detailB').then(res => {
          this.detailData = res.data
        })
      }
      // ... 可以根据需要继续添加其他路由名称的loading操作
    }
  }
}

Dalam contoh di atas, kami menentukan nama laluan semasa berdasarkan $route.name, kemudian hantar permintaan yang sepadan untuk memuatkan data dan menyimpannya dalam atribut data komponen, dan kemudian teruskan pada halaman Rendering data.

4. Ringkasan

Artikel ini terutamanya memperkenalkan cara mendapatkan nama laluan semasa dan memuatkan data yang berbeza berdasarkan nama dalam aplikasi vue. Kita boleh menggunakan lompat laluan dan fungsi lulus parameter yang disediakan oleh vue-router untuk memetakan data yang akan dimuatkan dan nama laluan, dan kemudian memuatkan data yang sepadan mengikut nama laluan dalam fungsi cangkuk yang dicipta atau dipasang oleh komponen. Kaedah pelaksanaan ini mudah dan mudah, dan juga boleh meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Bagaimanakah Vue mendapatkan nama laluan dan memuatkan data yang berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!