Bagaimanakah vue tidak menukar url

Vue.js ialah salah satu rangka kerja JavaScript yang paling popular pada masa ini. Ia membantu pembangun membina aplikasi satu halaman (SPA) yang kompleks dengan cepat. Dalam Vue.js, menukar komponen biasanya menyebabkan alamat URL berubah. Walau bagaimanapun, dalam beberapa kes adalah perlu untuk menghalang perubahan alamat URL, dan artikel ini akan meneroka beberapa kaedah praktikal.

Gunakan kaedah ganti Vue Router dan bukannya kaedah tolak

Vue Router ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue.js. Ia mengendalikan navigasi dan penghalaan dalam aplikasi. Secara lalai, Penghala Vue menggunakan kaedah tolak untuk menukar alamat URL semasa menavigasi. Contohnya:

this.$router.push('/new-page')

Jika anda perlu menavigasi ke halaman lain tanpa menukar alamat URL, anda boleh menggunakan kaedah ganti. Contohnya:

this.$router.replace('/new-page')

Menggunakan API sejarah

HTML5 menyediakan objek window.history, yang boleh menukar alamat URL tanpa memuat semula halaman. Dalam Vue.js, kami boleh menggunakan API sejarah untuk melaksanakan navigasi halaman tanpa menukar alamat URL.

Pertama, kita perlu menggunakan kaedah history.pushState untuk menambah keadaan baharu pada objek sejarah penyemak imbas. Contohnya:

history.pushState({}, '', '/new-page')

Ini akan menyebabkan alamat URL dalam bar alamat penyemak imbas bertukar kepada /new-page, tetapi tidak akan memuatkan semula halaman. Seterusnya, kita perlu mengemas kini komponen dalam aplikasi Vue.js supaya kandungan halaman baharu dipaparkan. Kami boleh menggunakan atribut jam tangan Vue Router untuk mendengar perubahan dalam alamat URL untuk mengemas kini komponen dalam aplikasi. Contohnya:

// 在Vue Router的路由配置中
const routes = [
  {
    path: '/new-page',
    component: NewPageComponent
  }
]

// 在Vue.js组件中
export default {
  watch: {
    $route(to, from) {
      // 在这里更新组件内容
    }
  }
}

Akhir sekali, untuk memastikan pengguna boleh menavigasi ke belakang dan ke hadapan dalam sejarah penyemak imbas, kita perlu menggantikan keadaan semasa aplikasi dengan keadaan baharu menggunakan kaedah history.replaceState. Contohnya:

history.replaceState({}, '', '/new-page')

Gunakan alamat Hash

Dalam Vue.js, jika anda menggunakan alamat Hash, anda boleh mengelak daripada menukar alamat URL. Alamat cincang merujuk kepada bahagian alamat URL yang bermula dengan # aksara. Apabila menggunakan alamat cincang, penyemak imbas tidak memuatkan semula halaman tetapi menavigasi dalam klien. Contohnya:

this.$router.push('/#new-page')

Dalam Vue.js, kita boleh menggunakan atribut mod Penghala Vue untuk mengkonfigurasi mod penghalaan. Contohnya:

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/',
      component: HomeComponent
    },
    {
      path: '/new-page',
      component: NewPageComponent
    }
  ]
})

Dengan menetapkan mod kepada cincang, kami boleh menjadikan Penghala Vue menggunakan alamat Cincang dan bukannya alamat URL penuh semasa menavigasi.

Ringkasan:

Dalam Vue.js, menghalang perubahan alamat URL boleh dicapai dengan menggunakan kaedah ganti Vue Router, API sejarah dan alamat Hash. Jika kita perlu menukar alamat URL, kita boleh menggunakan kaedah tolak atau mengubah suai objek window.location. Pilih penyelesaian yang berbeza untuk dilaksanakan mengikut keperluan khusus.

Atas ialah kandungan terperinci Bagaimanakah vue tidak menukar url. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!