[Ringkasan] Kaedah asas menggunakan rujukan URL dalam Vue

Cara untuk menggunakan rujukan URL dalam Vue sedikit berbeza daripada halaman HTML tradisional. Biasanya, dalam HTML, kita boleh terus menggunakan laluan relatif atau mutlak sebagai URL untuk merujuk sumber atau memaut ke halaman lain. Tetapi dalam Vue, kita perlu menggunakan Penghala Vue untuk mengurus laluan penghalaan dan penghalaan dalam aplikasi.

Berikut ialah beberapa cara asas untuk menggunakan rujukan URL dalam Vue:

1. Gunakan Vue Router untuk pengurusan laluan

Dalam Vue, kita boleh menggunakan Vue Router menguruskan penghalaan kami. Kita boleh menggunakan Penghala Vue dalam komponen Vue untuk melaksanakan navigasi laluan dan lompatan laluan.

Penghala Vue boleh dipasang melalui pengurus pakej npm dan kemudian digunakan dalam aplikasi Vue. Perkenalkan Penghala Vue dalam fail main.js:

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

Vue.use(VueRouter)

Seterusnya, kita boleh menentukan peraturan penghalaan dan laluan penghalaan. Contohnya, dalam komponen bernama MyComponent.vue, kita boleh menentukan laluan penghalaan:

const router = new VueRouter({
  routes: [
    {
      path: '/my-component',
      name: 'MyComponent',
      component: MyComponent
    }
  ]
})

Peraturan penghalaan ini bermakna apabila laluan /my-component dimasukkan dalam penyemak imbas, MyComponent akan diberikan komponen .

2. Gunakan pautan penghalaan untuk menjana URL

Dalam Vue, kami boleh menggunakan komponen untuk menjana pautan untuk navigasi laluan dalam aplikasi dan melompat. Pautan ini boleh membantu kami menjana laluan URL sebenar dan membuat lompatan penghalaan dalam aplikasi.

Sebagai contoh, dalam komponen bernama App.vue, kita boleh menggunakan komponen untuk menjana pautan:

<router-link to="/my-component">Link to My Component</router-link>

Pautan ini mewakili pautan ke /my - URL laluan komponen Apabila pengguna mengklik pautan, aplikasi akan melompat ke komponen MyComponent.

3. Menggunakan objek $router

Dalam Vue, setiap komponen boleh mengakses tika penghala melalui objek $router. Objek ini mengandungi semua kaedah penghalaan yang mana kita boleh melakukan operasi penghalaan.

Sebagai contoh, kita boleh menggunakan objek $router dalam komponen bernama MyComponent.vue untuk melaksanakan lompatan penghalaan:

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

Kaedah ini bermaksud melompat ke laluan /about.

Ringkasnya, Penghala Vue boleh membantu kami menguruskan laluan penghalaan dan penghalaan Gunakan komponen dalam komponen Vue untuk menjana pautan URL dan menggunakan objek $router dalam komponen untuk melaksanakan penghalaan melompat.

Atas ialah kandungan terperinci [Ringkasan] Kaedah asas menggunakan rujukan URL dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!