Bagaimanakah vue melepasi halaman baharu melalui butang

Dalam Vue, kita boleh melompat antara halaman melalui penghalaan. Dalam artikel ini, kami akan meneroka cara untuk menghantar ke halaman baharu menggunakan butang dalam Vue. Kami akan menggunakan Vue Router, pemalam penghala rasmi Vue.

Penghala Vue ialah penghala rasmi Vue.js. Ia membolehkan kami menyediakan jadual penghalaan yang memetakan beberapa URL ke komponen Vue. Dengan cara ini kita boleh menavigasi ke halaman yang berbeza melalui URL. Mari pasang Penghala Vue dahulu.

Pasang Vue Router

Untuk menggunakan Vue Router, kita perlu memasangnya terlebih dahulu. Ia boleh dipasang menggunakan npm atau benang.

Gunakan npm:

npm install vue-router

Gunakan benang:

yarn add vue-router

Gunakan Vue Router dalam projek Vue

Selepas memasang Vue Router, kita perlu menggunakan Vue Router in Projek Vue Gunakannya. Untuk menggunakan Penghala Vue dalam projek Vue, anda perlu memperkenalkan Penghala Vue dalam main.js dan menggunakannya.

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // ...
  ]
})

new Vue({
  router,
  // ...
}).$mount('#app')

Dalam kod di atas, kami mula-mula memperkenalkan Vue dan Vue Router dalam main.js. Kemudian, kami memberitahu Vue untuk menggunakan Penghala Vue melalui Vue.use(VueRouter). Seterusnya, kami mencipta contoh VueRouter dan menyampaikan beberapa peraturan penghalaan kepadanya. Akhir sekali, kami menghantar contoh VueRouter ini kepada pilihan penghala bagi contoh Vue. Dengan cara ini, Penghala Vue boleh berfungsi dalam aplikasi kami.

Tetapkan penghalaan

Dalam Penghala Vue, kita boleh menggunakan atribut routes untuk menetapkan penghalaan.

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

Dalam kod di atas, kami menetapkan dua laluan, '/' dan '/about' dalam atribut routes. Apabila kami mengakses laluan ini, Penghala Vue akan memaparkan komponen yang sepadan dengan laluan.

Pas parameter

Dalam Vue Router, kami boleh menghantar data melalui parameter URL. Kami boleh menambah parameter dalam URL dan parameter ini akan dihantar kepada komponen yang kami tentukan.

Sebagai contoh, jika kita ingin lulus parameter bernama id, kita boleh menetapkan laluan seperti ini:

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
})

Dalam laluan ini, kita telah menetapkan parameter menggunakan ':id' . Parameter ini akan dihantar ke komponen kami User.

Dalam komponen Pengguna, kita boleh mengakses parameter ini melalui $route.params.id. Contohnya:

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

Dalam kod di atas, kami menggunakan $route.params.id untuk mengakses parameter yang kami lalui.

Ke Hadapan dan Ke Belakang

Penghala Vue juga menyokong fungsi ke hadapan dan ke belakang. Kita boleh menggunakan kaedah $router.go() untuk mencapai ke hadapan dan ke belakang. Contohnya:

<template>
  <div>
    <button @click="$router.go(-1)">Back</button>
    <button @click="$router.go(1)">Foward</button>
  </div>
</template>

Dalam kod di atas, kami mencipta dua butang. Satu untuk ke belakang dan satu untuk ke hadapan. Apabila butang ini diklik, kami memanggil kaedah $router.go(), menghantar parameter angka. Nombor ini mewakili bilangan langkah yang kita mahu pergi ke hadapan atau ke belakang. Nombor negatif bermakna pergi ke belakang, nombor positif bermakna maju.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan Penghala Vue untuk menyediakan laluan, lulus parameter dan pergi ke hadapan dan ke belakang. Melalui kaedah ini, kami boleh melompat antara halaman dengan mudah dalam projek Vue.

Atas ialah kandungan terperinci Bagaimanakah vue melepasi halaman baharu melalui butang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!