Bagaimanakah vue menentukan bekas yang hendak dilompat?

Vue ialah salah satu rangka kerja JavaScript yang paling popular hari ini dan sering digunakan untuk membina aplikasi satu halaman dan tapak web. Soalan biasa ialah cara menentukan bekas yang hendak dilompat dalam Vue. Artikel ini akan meneroka beberapa cara berbeza untuk menyelesaikan masalah ini.

1. Menggunakan Vue Router

Vue Router ialah pengurus penghalaan rasmi Vue.js. Ia membolehkan anda menentukan laluan untuk URL yang berbeza dan menyediakan mekanisme untuk mengemas kini URL sambil memberikan komponen yang sepadan ke dalam bekas yang betul. Untuk menggunakan Penghala Vue, anda perlu memasangnya dan menambahkannya pada aplikasi Vue anda.

Mula-mula, pasang Penghala Vue:

npm install vue-router --save

Kemudian, anda perlu menambah Penghala Vue sebagai pemalam dalam aplikasi Vue anda:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Seterusnya, tentukan anda penghalaan. Katakan aplikasi Vue anda mempunyai dua komponen: Laman Utama dan Perihal. Untuk menentukan laluan bagi kedua-dua komponen ini, anda boleh menulis kod seperti ini:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

Dalam contoh ini, laluan / akan memaparkan komponen Laman Utama, manakala laluan /about akan memaparkan komponen Perihal.

Akhir sekali, buat contoh VueRouter dalam aplikasi Vue anda:

const router = new VueRouter({
  routes
})

Kini anda boleh menggunakan komponen pautan penghala dalam komponen Vue anda untuk beralih ke laluan yang ditentukan:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

komponen pautan penghala dipaparkan sebagai pautan yang menavigasi halaman ke laluan yang ditentukan.

2. Gunakan atribut $refs Vue

Cara lain ialah menggunakan atribut $refs Vue. Ini membolehkan anda menambah rujukan kepada komponen Vue dan merujuknya dengan mudah apabila anda perlu mengakses komponen tersebut. Untuk menambah rujukan dalam komponen Vue, gunakan atribut ref seperti ini:

<template>
  <div>
    <div ref="container">
      <!-- 容器代码 -->
    </div>
  </div>
</template>

Dalam contoh ini, kami akan menambah rujukan bernama "bekas" pada elemen div. Untuk mengakses rujukan, gunakan ini.$refs.container dalam komponen Vue.

Anda juga boleh menggunakan sifat $route Vue untuk mendapatkan laluan semasa dan menggunakan sifat $watch Vue untuk mendengar perubahan laluan. Ini membolehkan anda mengemas kini bekas apabila laluan berubah, seperti ini:

<template>
  <div>
    <div ref="container">
      <!-- 容器代码 -->
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    '$route.path': function (newValue, oldValue) {
      this.updateContainer()
    }
  },
  methods: {
    updateContainer: function () {
      // 获取当前路由
      const path = this.$route.path
      
      // 获取容器元素
      const container = this.$refs.container
      
      // 清空容器
      container.innerHTML = ''
      
      // 根据当前路由更新容器
      if (path === '/home') {
        // 在容器中添加Home组件
        // ...
      } else if (path === '/about') {
        // 在容器中添加About组件
        // ...
      }
    }
  }
}
</script>

Dalam contoh ini kami akan menggunakan sifat $watch Vue untuk memantau $route.path supaya kaedah updateContainer dipanggil apabila laluan perubahan. Kaedah ini mendapatkan laluan semasa dan elemen kontena dan mengemas kini kontena berdasarkan laluan semasa.

3. Gunakan kaedah QuerySelector JavaScript

Akhir sekali, anda juga boleh menggunakan kaedah QuerySelector JavaScript untuk mencari bekas untuk memaparkan komponen Vue. querySelector membolehkan anda memilih elemen mengikut ID, kelas, teg, dsb. dan kemudian mencarinya dalam DOM.

Berikut ialah contoh menggunakan kaedah querySelector:

<template>
  <div>
    <div id="container">
      <!-- 容器代码 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted: function () {
    // 查找容器元素
    const container = document.querySelector('#container')
    
    // 根据路由更新容器
    if (this.$route.path === '/home') {
      // 在容器中添加Home组件
      // ...
    } else if (this.$route.path === '/about') {
      // 在容器中添加About组件
      // ...
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan kaedah querySelector dalam kaedah kitaran hayat yang dipasang bagi komponen untuk mencari elemen kontena. Kami kemudian mengemas kini kontena berdasarkan laluan semasa.

Kesimpulan

Terdapat banyak cara berbeza untuk menentukan bekas yang hendak dilompat dalam Vue. Menggunakan Penghala Vue ialah pendekatan popular yang membolehkan anda menentukan laluan URL dan membolehkan anda memaparkan komponen Vue yang betul apabila diperlukan. Alternatifnya ialah menggunakan sifat $refs Vue, yang membolehkan anda merujuk komponen Vue dan mengaksesnya apabila diperlukan. Akhir sekali, anda juga boleh menggunakan kaedah querySelector JavaScript untuk mencari bekas untuk memaparkan komponen Vue. Mana-mana pendekatan yang anda pilih, anda harus mempertimbangkan sama ada ia sepadan dengan struktur dan keperluan aplikasi Vue anda.

Atas ialah kandungan terperinci Bagaimanakah vue menentukan bekas yang hendak dilompat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!