Bagaimana untuk melaksanakan lompat halaman web dalam vue

Dalam aplikasi Vue, terdapat banyak cara untuk melaksanakan lompatan halaman web. Berikut adalah beberapa kaedah yang biasa digunakan.

1. Gunakan vue-router

vue-router ialah pemalam penghalaan bahagian hadapan rasmi untuk Vue, yang boleh membantu kami mengurus penghalaan aplikasi dengan lebih mudah. Lompatan halaman boleh dicapai dengan menambahkan laluan dan komponen yang sepadan dalam konfigurasi penghalaan. Secara umumnya, kita perlu memperkenalkan vue-router dalam fail main.js dan menyuntik penghala ke dalam contoh Vue. Sebagai contoh, kami boleh menambah kod berikut pada fail App.vue:

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view/>
  </div>
</template>

<script>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})
</script>

Dalam kod di atas, kami menggunakan dua komponen pautan penghala untuk membuat pautan boleh klik pada halaman. Kedua-dua pautan ini masing-masing sepadan dengan komponen Laman Utama dan Perihal Kami mengikatnya pada laluan yang sepadan melalui tatasusunan laluan dalam konfigurasi penghalaan.

2. Gunakan objek tetingkap

Dalam Vue, kami juga boleh terus menggunakan objek window.location asli JavaScript untuk melaksanakan lompatan halaman. Sebagai contoh, jika kita ingin melompat ke halaman bernama "aboutUs.html", kita boleh menggunakan kod berikut dalam komponen:

methods: {
  goToAboutUsPage() {
    window.location.href = 'aboutUs.html'
  }
}

Dengan cara ini, selepas mengklik butang, halaman itu akan melompat ke halaman yang ditentukan.

3. Gunakan router.push

Selain menggunakan vue-router dalam konfigurasi penghalaan untuk lompatan halaman, kami juga boleh lulus kaedah ini.$router.push( ) untuk melaksanakan lompatan. Sebagai contoh, dengan mengandaikan kita ingin melompat ke laluan bernama "about", kita boleh menggunakan kod berikut dalam komponen:

methods: {
  goToAboutPage() {
    this.$router.push('/about')
  }
}

Dengan cara ini, selepas mengklik butang, halaman akan melompat ke laluan yang ditentukan .

Ringkasan

Terdapat banyak cara untuk melaksanakan lompatan halaman dalam aplikasi Vue, dan pilihan khusus harus berdasarkan situasi sebenar. Jika anda perlu melaksanakan lompatan penghalaan yang lebih kompleks, anda boleh menggunakan vue-router untuk pengurusan jika anda hanya memerlukan lompatan halaman yang mudah, anda boleh menggunakan kaedah window.location atau this.$router.push() untuk mencapainya.

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