Rumah hujung hadapan web View.js Bagaimana untuk menggunakan penghalaan untuk mencapai kesan penukaran halaman dalam projek Vue?

Bagaimana untuk menggunakan penghalaan untuk mencapai kesan penukaran halaman dalam projek Vue?

Jul 21, 2023 pm 07:07 PM
Penukaran halaman penghalaan vue Sedar kesannya

Bagaimana untuk menggunakan penghalaan untuk mencapai kesan penukaran halaman dalam projek Vue?

Dengan pembangunan berterusan pembangunan bahagian hadapan, kaedah pembangunan aplikasi satu halaman (SPA) menjadi semakin popular di kalangan pembangun. Dalam SPA, adalah keperluan yang sangat biasa untuk mencapai kesan penukaran antara halaman melalui penghalaan. Dalam Vue.js, kita boleh menggunakan Penghala Vue untuk mencapai fungsi ini.

Vue Router ialah alat penghalaan yang disediakan secara rasmi oleh Vue.js. Ia boleh membantu kami menavigasi dan melompat antara halaman dalam projek Vue. Di bawah ini kami akan memperkenalkan langkah demi langkah cara menggunakan Penghala Vue dalam projek Vue untuk mencapai kesan penukaran halaman.

Pertama, kita perlu memasang Penghala Vue dalam projek Vue. Penghala Vue boleh dipasang melalui npm, menggunakan arahan berikut:

npm install vue-router
Salin selepas log masuk

Selepas pemasangan selesai, kita perlu memperkenalkan Penghala Vue dalam fail kemasukan projek (biasanya main.js) dan menggunakannya. Kami boleh menggunakan kod berikut untuk memperkenalkan Penghala Vue:

import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)
Salin selepas log masuk

Kemudian, tulis kod berikut untuk mencipta objek penghalaan:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})
Salin selepas log masuk

Dalam contoh ini, kami mentakrifkan dua laluan: '/'Komponen yang sepadan ialah Laman Utama,' Komponen sepadan dengan /about' ialah About. Apabila pengguna mengakses laluan yang sepadan, Penghala Vue akan memaparkan komponen yang sepadan secara automatik.

Kemudian, kita perlu menambah objek penghalaan pada contoh Vue. Kita boleh mencapai ini dengan kod berikut:

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
Salin selepas log masuk

Di sini, kami menambah objek penghalaan pada pilihan penghala dalam contoh Vue.

Dalam komponen Vue, kita boleh bertukar antara halaman melalui teg pautan penghala. Kami boleh menambah teg pautan penghala pada templat komponen menggunakan kod berikut:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
Salin selepas log masuk

Dalam contoh ini, kami telah menambah dua teg pautan penghala. Apabila pengguna mengklik pada label ini, Penghala Vue akan menavigasi pengguna secara automatik ke laluan yang sepadan.

Akhir sekali, kami juga perlu menambah teg paparan penghala pada komponen Vue. Ini boleh dicapai menggunakan kod berikut:

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

teg paparan penghala digunakan untuk menjadikan komponen sepadan dengan laluan semasa.

Melalui langkah di atas, kita boleh menggunakan Penghala Vue dalam projek Vue untuk mencapai kesan penukaran halaman. Apabila pengguna mengklik label pautan penghala, laluan akan menavigasi secara automatik ke komponen yang sepadan dan halaman akan bertukar dengan sewajarnya.

Kod sampel lengkap adalah seperti berikut:

import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
Salin selepas log masuk
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    &lt;router-view&gt;&lt;/router-view&gt;
  </div>
</template>
Salin selepas log masuk

Melalui kod di atas, kita boleh menggunakan Penghala Vue dalam projek Vue untuk mencapai kesan penukaran halaman, menjadikan pengalaman interaksi pengguna lebih lancar. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan penghalaan untuk mencapai kesan penukaran halaman dalam projek Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Jul 21, 2023 pm 02:37 PM

Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue?

Petua dan amalan terbaik untuk menggunakan kesan peralihan untuk mencapai penukaran halaman dalam Vue Petua dan amalan terbaik untuk menggunakan kesan peralihan untuk mencapai penukaran halaman dalam Vue Jun 25, 2023 am 10:53 AM

Petua dan amalan terbaik untuk menggunakan kesan peralihan untuk mencapai penukaran halaman dalam Vue

Bagaimana untuk menggunakan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue? Bagaimana untuk menggunakan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue? Jul 22, 2023 pm 12:17 PM

Bagaimana untuk menggunakan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue?

Konfigurasi UniApp dan strategi pengoptimuman untuk mencapai kesan penukaran halaman Konfigurasi UniApp dan strategi pengoptimuman untuk mencapai kesan penukaran halaman Jul 04, 2023 pm 08:43 PM

Konfigurasi UniApp dan strategi pengoptimuman untuk mencapai kesan penukaran halaman

Cara menggunakan penghalaan untuk mencapai lompatan halaman dan akses dalam Vue Cara menggunakan penghalaan untuk mencapai lompatan halaman dan akses dalam Vue Oct 15, 2023 am 10:58 AM

Cara menggunakan penghalaan untuk mencapai lompatan halaman dan akses dalam Vue

Aplikasi fungsi kesan peralihan penukaran halaman dalam dokumen Vue Aplikasi fungsi kesan peralihan penukaran halaman dalam dokumen Vue Jun 20, 2023 am 09:01 AM

Aplikasi fungsi kesan peralihan penukaran halaman dalam dokumen Vue

Kesan aplikasi dan pelaksanaan CSS::before pseudo-element selector Kesan aplikasi dan pelaksanaan CSS::before pseudo-element selector Nov 20, 2023 pm 04:41 PM

Kesan aplikasi dan pelaksanaan CSS::before pseudo-element selector

Cara menggunakan fungsi pengesahan penghalaan dalam dokumen Vue Cara menggunakan fungsi pengesahan penghalaan dalam dokumen Vue Jun 20, 2023 am 09:07 AM

Cara menggunakan fungsi pengesahan penghalaan dalam dokumen Vue

See all articles