Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah yang berlaku dengan lompat halaman vue?

Apakah yang berlaku dengan lompat halaman vue?

PHPz
Lepaskan: 2023-05-25 10:19:08
asal
756 orang telah melayarinya

Vue ialah rangka kerja JavaScript moden yang biasa digunakan untuk membina aplikasi satu halaman (SPA). SPA membolehkan pengguna menavigasi halaman dan komponen halaman yang berbeza tanpa memuatkan semula keseluruhan halaman. Dalam Vue, lompatan halaman dilaksanakan terutamanya melalui penghalaan.

Penghalaan ialah mekanisme yang memetakan URI kepada komponen. URI ialah sebahagian daripada URL, seperti "https://example.com/user/123". Bahagian /user/123 URI dipanggil laluan penghalaan. Dalam Vue, penghalaan dilaksanakan melalui Penghala Vue.

Vue Router ialah pengurus penghalaan rasmi Vue.js. Menggunakan Penghala Vue, anda boleh menentukan laluan dan memetakan laluan penghalaan kepada komponen Vue. Penghala Vue juga menyediakan fungsi navigasi laluan, membolehkan pengguna menavigasi ke halaman dan komponen halaman yang berbeza tanpa memuatkan semula keseluruhan halaman. Navigasi laluan boleh dilaksanakan melalui pautan (seperti ) atau secara pengaturcaraan (seperti ini.$router.push('/')).

Penggunaan asas Vue Router adalah seperti berikut:

  1. Pasang Vue Router
npm install vue-router
Salin selepas log masuk
  1. Buat laluan
rreee

Dalam kod di atas, kami mencipta dua laluan: "home" dan "about", yang masing-masing dipetakan ke komponen Home dan About. Laluan penghalaan adalah "/" dan "/about" masing-masing.

  1. Menggunakan penghalaan dalam komponen Vue
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})
Salin selepas log masuk

Dalam kod di atas, kami menggunakan komponen <router-link> untuk membuat pautan laluan dan komponen <router-view> untuk menjadikan Komponen dipadankan mengikut laluan semasa.

  1. Navigasi ke laluan berbeza
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>
Salin selepas log masuk

Dalam kod di atas, kami menavigasi ke laluan berbeza secara pemrograman. Gunakan kaedah this.$router.push() untuk menukar laluan penghalaan semasa kepada laluan baharu.

Ringkasnya, Penghala Vue menyediakan mekanisme penghalaan yang fleksibel dan mudah digunakan. Dengan mentakrifkan laluan dan memetakan laluan laluan ke komponen Vue, kami boleh mencipta aplikasi halaman tunggal dan membenarkan pengguna menavigasi ke halaman dan komponen halaman yang berbeza tanpa memuatkan semula keseluruhan halaman.

Atas ialah kandungan terperinci Apakah yang berlaku dengan lompat halaman vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan