Pembangunan kemasukan VUE3: menggunakan Vue-Router untuk mencapai lonjakan halaman

Vue 3 ialah salah satu rangka kerja JavaScript yang paling popular hari ini, digunakan untuk membina antara muka pengguna interaktif. Vue-Router ialah pemalam untuk rangka kerja Vue, digunakan untuk melaksanakan pengurusan penghalaan dalam aplikasi satu halaman. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue-Router untuk melaksanakan lompatan halaman dalam Vue 3.

1 Pasang dan konfigurasikan Vue-Router

Sebelum bermula, pastikan anda telah memasang Vue 3. Jika ia belum dipasang lagi, anda boleh merujuk kepada dokumentasi rasmi untuk memasangnya: https://v3.cn.vuejs.org/guide/installation.html.

Pasang Vue-Router:

Dalam terminal, jalankan arahan berikut untuk memasang:

npm install vue-router@4.0.0-alpha.13

Dalam Vue 3, versi Vue-Router hendaklah tidak lebih rendah daripada 4.0. 0-alfa.13.

Selepas memasang Vue-Router, kita perlu mengkonfigurasi Vue-Router dalam aplikasi Vue 3. Cipta fail route.js:

import Home from '@/components/Home'
import About from '@/components/About'

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

Dalam fail ini, kami mentakrifkan dua laluan, satu ialah halaman utama (Laman Utama) dan satu lagi ialah halaman tentang kami (Perihal).

Kami juga perlu mengimport Vue-Router dalam fail kemasukan (main.js) aplikasi Vue 3 dan mengkonfigurasinya:

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp(App)

app.use(router)

app.mount('#app')

Dalam fail ini, kami mencipta melalui fungsi createRouter contoh penghala, dan gunakan fungsi createWebHistory untuk mencipta skema penghala. Kami juga melalui laluan ke contoh penghala.

Dalam Vue 3, kami menggunakan kaedah app.use() untuk memasang pemalam Vue-Router ke dalam aplikasi Vue. Akhir sekali, letakkan kaedah app.mount() selepas kaedah app.use() Ini memastikan bahawa Vue-Router telah dipasang dengan betul dan aplikasi boleh berjalan seperti biasa.

2. Laksanakan lompat halaman

Sekarang kami telah berjaya memasang dan mengkonfigurasi Vue-Router, kami akan menggunakan Vue-Router untuk melaksanakan lompat halaman.

1. Tambahkan pautan penghalaan dalam fail App.vue:

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

Dalam templat ini, kami menggunakan komponen menentukan kepada Atribut ialah laluan penghalaan.

2. Tambah kandungan dalam Home.vue dan About.vue

Kami telah mencipta dua komponen Vue untuk halaman Laman Utama dan Perihal, kami perlu menambah kandungan dalam templat komponen ini Tambah beberapa kandungan untuk mengesahkan bahawa halaman melompat seperti biasa.

Home.vue:

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page</p>
  </div>
</template>

About.vue:

<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the about page</p>
  </div>
</template>

Kini, kami telah berjaya menyediakan pautan penghalaan dan kandungan halaman. Kita boleh menggunakan pautan ini untuk melompat ke halaman.

3. Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan Vue-Router untuk melaksanakan lompatan halaman dalam Vue 3. Mula-mula, kami memasang dan mengkonfigurasi Vue-Router. Kemudian, kami mencipta pautan laluan menggunakan komponen Akhir sekali, kami menambah kandungan pada templat komponen untuk mengesahkan sama ada halaman melompat dengan jayanya.

Vue-Router mempunyai banyak ciri lain, seperti penghalaan dinamik, penghalaan bersarang, pengawal laluan dan banyak lagi. Dengan menguasai ciri ini, anda boleh mencipta aplikasi satu halaman yang kompleks dan menggunakan lompatan dan navigasi dalam aplikasi anda.

Atas ialah kandungan terperinci Pembangunan kemasukan VUE3: menggunakan Vue-Router untuk mencapai lonjakan halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!