Apakah yang berlaku dengan lompat halaman vue?

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

2. 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.

3. 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
    }
  ]
})

Dalam kod di atas, kami menggunakan komponen b988a8fd72e5e0e42afffd18f951b277 untuk membuat pautan laluan dan komponen 975b587bf85a482ea10b0a28848e78a4 untuk menjadikan Komponen dipadankan mengikut laluan semasa.

4. 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>

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!