Penjelasan terperinci tentang pemasangan dan penggunaan penghalaan dalam vue

Vue ialah rangka kerja pembangunan bahagian hadapan yang popular yang menyediakan banyak alatan dan fungsi yang memudahkan pembangunan. Antaranya, penghalaan Vue boleh membantu kami membuat aplikasi satu halaman dan membantu kami melaksanakan fungsi penghalaan. Artikel ini akan memperkenalkan penggunaan penghalaan Vue.

Pemasangan penghalaan Vue

Sebelum mula menggunakan penghalaan Vue, kita perlu memasang Penghala Vue terlebih dahulu. Ia boleh dipasang melalui npm:

npm install vue-router

Menggunakan Penghala Vue

Dalam fail masuk main.js projek Vue, kita perlu membuat beberapa konfigurasi untuk menggunakan penghalaan Vue.

Pertama, kita perlu mengimport Vue dan Vue Router:

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

Vue.use(VueRouter)

Kemudian, kita perlu menentukan laluan. Ia boleh dilakukan dalam fail js yang berasingan Sebagai contoh, di sini kita mentakrifkan laluan dalam route.js:

import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

export default [
  {
    path: '/',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]

Dalam route.js, kita mula-mula mengimport komponen yang perlu kita gunakan, dan kemudian menentukan Array yang mengandungi dua objek penghalaan. Setiap objek laluan mengandungi medan laluan dan komponen.

Seterusnya, dalam main.js, kita perlu mencipta tika VueRouter dan menghantarnya ke dalam tika Vue:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes // 简写
})

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

Seterusnya, kami menambahkannya pada komponen Vue kami Gunakan penghalaan dalam . Sebagai contoh, kita boleh menggunakan laluan dalam <router-link> untuk memaut ke laluan lain:

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/bar">Go to Bar</router-link>
  </div>
</template>

Di sini, kami menggunakan tag <router-link> untuk membuat pautan laluan yang boleh melompat ke laluan yang ditentukan apabila pengguna mengklik penghalaan pautan. Atribut kepada mentakrifkan laluan sasaran pautan.

Selain itu, kami juga boleh menggunakan fungsi navigasi program yang disediakan oleh Vue Router untuk mencapai lompatan halaman:

this.$router.push('/bar')

Apabila melompat, kami juga boleh melepasi beberapa Parameter:

this.$router.push({ name: 'User', params: { userId: 1 }})

Di sini, kami menggunakan kaedah $router.push dan lulus objek sebagai parameter, dengan medan nama menentukan nama laluan sasaran dan medan params melepasi beberapa parameter.

Ringkasan

Penghala Vue ialah salah satu komponen yang sangat penting dalam rangka kerja Vue Ia menyediakan fungsi penghalaan yang berkuasa dan boleh membantu kami mencipta aplikasi satu halaman yang lebih berwarna. Dalam artikel ini, kami menerangkan pemasangan dan penggunaan penghalaan Vue dan memberi anda pemahaman yang lebih mendalam tentang cara menggunakan Penghala Vue melalui kod sampel. Saya harap ia dapat membantu semua orang menggunakan penghala Vue dengan lebih baik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang pemasangan dan penggunaan penghalaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!