Bagaimana untuk membuka halaman baharu dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membangunkan aplikasi web moden. Vue direka bentuk untuk menjadi fleksibel dan mudah diperluaskan, menjadikannya ideal untuk membina aplikasi satu halaman. Walau bagaimanapun, bagi sesetengah pemula, membuka halaman dalam Vue mungkin agak sukar. Dalam artikel ini, kami akan membincangkan cara membuka halaman baharu dalam Vue, serta beberapa masalah yang mungkin anda hadapi semasa membuka halaman tersebut.

Pertama, mari kita lihat kaedah asas membuka halaman baharu dalam Vue. Untuk membuka halaman baharu, anda perlu menggunakan fungsi penghalaan yang disediakan oleh Vue. Penghalaan ialah konsep penting dalam Vue, ia adalah komponen yang dipetakan ke URL. Penghalaan menjadikan navigasi dalam aplikasi sangat mudah.

Untuk menggunakan penghalaan Vue, sila pastikan anda telah memasang Penghala Vue. Anda boleh menggunakan npm atau yarn untuk memasang Vue Router, seperti berikut:

npm install vue-router

atau

yarn add vue-router

Selepas pemasangan selesai, anda boleh menggunakan Vue Router. Mula-mula, anda perlu mencipta tika penghala dalam aplikasi Vue anda, seperti yang ditunjukkan di bawah:

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

Dalam contoh ini, tika penghala dicipta dan dua laluan ditakrifkan: satu ialah halaman utama dan yang lain ialah tentang halaman. Setiap laluan mempunyai laluan URL (laluan), nama (nama) dan komponen (komponen). Laluan ini akan digunakan dalam aplikasi Vue.

Seterusnya, anda perlu menggunakan contoh penghala yang dibuat dalam aplikasi Vue anda. Atribut penghala boleh digunakan dalam contoh akar aplikasi Vue seperti ini:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Kini setelah konfigurasi penghalaan asas telah dibuat, langkah seterusnya ialah membuka halaman baharu dalam Vue.

Untuk membuka halaman baharu dalam Vue, anda perlu menggunakan arahan pautan v-router yang disediakan oleh Vue Router. Arahan pautan-v-router digunakan dalam Vue untuk mencipta pautan boleh klik yang boleh menavigasi pengguna dari satu halaman ke halaman yang lain.

Sebagai contoh, untuk mencipta menu navigasi dalam Vue yang menyertakan pautan ke halaman Perihal, anda boleh menggunakan kod berikut:

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

Dalam contoh ini, v-router The - arahan pautan digunakan untuk membuat pautan ke halaman "Perihal". Atribut kepada menentukan laluan URL pautan. Apabila pengguna mengklik pautan, Penghala Vue akan menavigasi ke komponen yang dipetakan oleh laluan URL ini.

Sekarang anda tahu kaedah asas membuka halaman baharu dalam Vue, mari lihat beberapa masalah yang mungkin anda hadapi semasa membuka halaman.

Soalan pertama ialah cara mengakses parameter URL dalam halaman baharu. Untuk mengakses parameter URL dalam Vue, anda boleh menggunakan objek $route. Objek $route mengandungi maklumat tentang laluan semasa, termasuk parameter URL dan parameter pertanyaan. Sebagai contoh, parameter diakses dalam laluan URL berikut:

/about/:id

Parameter ID boleh diakses dalam Vue menggunakan kod berikut:

this.$route.params.id

Soalan kedua ialah bagaimana untuk buka satu dalam pautan Luar Vue. Untuk membuka pautan luaran dalam Vue, anda boleh menggunakan atribut sasaran arahan pautan v-router yang disediakan oleh Vue Router. Contohnya, buka pautan luaran dalam arahan pautan Vrouter berikut:

<router-link to="https://www.example.com" target="_blank">Example</router-link>

Dalam contoh ini, atribut sasaran digunakan untuk membuka tetingkap baharu dan memaut ke URL luaran.

Dalam artikel ini, kami membincangkan cara membuka halaman baharu dalam Vue. Kami mempelajari cara membuat konfigurasi penghalaan asas menggunakan Penghala Vue, cara membuat pautan boleh klik menggunakan arahan pautan v-router, cara mengakses parameter URL dalam halaman baharu dan cara membuka pautan luaran dalam Vue. Petua ini akan membantu anda menjadi pembangun master Vue.

Atas ialah kandungan terperinci Bagaimana untuk membuka halaman baharu dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!