vue melompat ke html dengan parameter

Dalam aplikasi Vue, kita selalunya perlu melompat antara halaman HTML yang berbeza. Kadangkala kita perlu membawa parameter untuk melompat untuk memenuhi keperluan perniagaan. Artikel ini akan memperkenalkan cara untuk melompat ke halaman HTML dengan parameter dalam aplikasi Vue.

1. Gunakan Vue Router

Vue Router ialah pengurus penghalaan rasmi Vue.js, yang boleh melaksanakan lompatan penghalaan untuk aplikasi SPA dengan mudah. Menggunakan Penghala Vue dalam aplikasi Vue boleh melaksanakan lompatan halaman HTML dengan parameter dengan mudah.

1. Pasang Vue Router

Sebelum menggunakan Vue Router, anda perlu memasangnya. Vue Router boleh dipasang melalui npm Perintah khusus adalah seperti berikut:

npm install vue-router --save

Selepas pemasangan selesai, perkenalkan Vue Router ke dalam projek Vue seperti berikut:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

2. Konfigurasikan penghalaan

Sebelum menggunakan Penghala Vue untuk lompat laluan, anda perlu mengkonfigurasi penghalaan terlebih dahulu. Mengkonfigurasi penghalaan dalam Penghala Vue adalah sangat mudah Anda hanya perlu menentukan tatasusunan laluan dalam contoh Vue. Contohnya:

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

const router = new Router({
  routes,
  mode: 'history'
})

export default router

Kod di atas mentakrifkan dua konfigurasi penghalaan. Laluan yang sepadan bagi laluan pertama ialah "/home" dan komponennya ialah Home; laluan yang sepadan bagi laluan kedua ialah "/detail/:id", dengan "id" ialah parameter dinamik dan komponennya ialah Detail.

3. Lakukan lompatan laluan

Sangat mudah untuk melakukan lompatan laluan dalam Penghala Vue. Hanya gunakan komponen pautan penghala untuk melompat, atau gunakan kaedah router.push untuk menavigasi secara pengaturcaraan.

• Gunakan pautan penghala untuk melompat

Menggunakan komponen pautan penghala dalam templat komponen Vue boleh membuat lompatan penghalaan dengan mudah. Contohnya:

<router-link :to="{name: 'detail', params: {id: 123}}">Show Detail</router-link>

Dalam kod di atas, komponen pautan penghala digunakan untuk melompat ke laluan bernama "detail", dan membawa parameter "id" dengan nilai 123.

• Gunakan kaedah router.push untuk melompat

Gunakan kaedah router.push dalam komponen Vue untuk mencapai navigasi program. Contohnya:

this.$router.push({name: 'detail', params: {id: 123}})

Dalam kod di atas, kaedah router.push digunakan untuk melompat ke laluan bernama "detail" dan membawa parameter "id" dengan nilai 123.

2. Gunakan location.href

Selain menggunakan Vue Router untuk lompatan laluan, anda juga boleh menggunakan lokasi asal.href untuk lompatan. Apabila melaksanakan lompat laluan melalui location.href, URL perlu disambung secara manual dan parameter perlu dikodkan.

1. Gunakan location.href untuk melompat

Menggunakan location.href untuk melompat adalah sangat mudah. Sebagai contoh, kami ingin melompat ke halaman HTML bernama "detail" dan membawa parameter "id" dengan nilai 123, yang boleh seperti berikut:

location.href = '/detail.html?id=' + encodeURIComponent('123')

Dalam kod di atas, kaedah encodeURIComponent ialah digunakan untuk mengekod parameter Dikodkan. Ini dilakukan untuk mengelakkan parameter yang mengandungi aksara khas, menyebabkan URL ubah hala menjadi salah bentuk.

2. Mendapatkan parameter dalam halaman HTML

Selepas melompat ke halaman HTML dengan parameter, kita perlu mendapatkan parameter daripada URL untuk kegunaan seterusnya. Dalam JavaScript, anda boleh mendapatkan bahagian parameter URL melalui location.search. Sebagai contoh, katakan kita melompat ke halaman HTML bernama "detail" dan nilai parameter "id" ialah 123. Anda boleh mendapatkan parameter melalui kod berikut:

function getUrlParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  const r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURIComponent(r[2])
  }
  return null
}

const id = getUrlParam('id')
console.log(id) // 输出123

Dalam kod di atas, RegExp dan padanan digunakan Kaedah untuk mendapatkan bahagian parameter URL dengan parameter. Gunakan kaedah decodeURIComponent untuk menyahkod parameter untuk mengelakkan ralat penghuraian yang disebabkan oleh aksara khas yang terkandung dalam parameter.

Ringkasnya, menggunakan Penghala Vue untuk lompat laluan ialah cara yang lebih disyorkan. Ia boleh mengurus penghalaan dengan lebih baik, melompat lebih pantas dan lebih selari dengan idea MVVM Vue. Sudah tentu, kita juga boleh menggunakan lokasi asli.href untuk lompatan penghalaan, tetapi kita perlu memberi perhatian kepada pengekodan dan penyahkodan parameter. Dalam perkembangan sebenar, perlu memilih kaedah yang sesuai mengikut situasi sebenar.

Atas ialah kandungan terperinci vue melompat ke html dengan parameter. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!