Bagaimana untuk menggunakan penghalaan untuk merangkum komponen awam dalam projek Vue?

Cara menggunakan penghalaan untuk merangkum komponen awam dalam projek Vue

Semasa proses pembangunan projek Vue, kami sering menghadapi situasi di mana komponen yang sama perlu digunakan dalam berbilang halaman. Untuk mengelak daripada menulis kod serupa berulang kali, kami boleh merangkum komponen biasa ini dan menggunakannya dalam halaman yang berbeza melalui penghalaan.

Di bawah ini kami menggunakan contoh mudah untuk menggambarkan cara menggunakan penghalaan untuk merangkum komponen awam dalam projek Vue. Katakan kami mempunyai projek dengan dua halaman: Home.vue dan About.vue. Kedua-dua halaman perlu menggunakan komponen awam bernama UserInfo.vue untuk memaparkan maklumat pengguna.

Mula-mula, buat folder bernama komponen dalam projek. Cipta fail bernama UserInfo.vue dalam folder ini untuk menyimpan kod komponen awam.

Kod UserInfo.vue adalah seperti berikut:

<template>
  <div>
    <h2>User Info</h2>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
      },
    }
  },
}
</script>

Seterusnya, buat folder bernama penghala di bawah folder src projek. Cipta fail bernama index.js dalam folder ini untuk mengkonfigurasi maklumat penghalaan.

Kod index.js adalah seperti berikut:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

Seterusnya, perkenalkan dan gunakan UserInfo.vue komponen awam masing-masing dalam fail Home.vue dan About.vue. Kod

Home.vue adalah seperti berikut:

<template>
  <div>
    <h1>Home Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'Home',
  components: {
    UserInfo,
  },
}
</script>

Kod About.vue adalah seperti berikut:

<template>
  <div>
    <h1>About Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'About',
  components: {
    UserInfo,
  },
}
</script>

Akhir sekali, ubah suai fail App.vue projek dan sarang teg pandangan penghala vue-router dalam kedudukan yang sesuai , digunakan untuk memaparkan paparan yang sepadan berdasarkan laluan.

Kod App.vue adalah seperti berikut:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

Pada ketika ini, kami telah berjaya merangkum komponen awam dalam projek Vue, dan kemudian menggunakannya dalam halaman yang berbeza melalui penghalaan. Dengan cara ini, kami dapat menjimatkan masa dan kod serta meningkatkan kecekapan pembangunan projek.

Perlu diambil perhatian bahawa apabila menggunakan penghalaan untuk merangkum komponen awam, anda perlu memastikan bahawa vue-router telah dipasang dan dikonfigurasikan dengan betul, dan diperkenalkan dan didaftarkan dengan betul dalam halaman yang memerlukan penggunaan komponen awam.

Di atas ialah cara menggunakan penghalaan untuk merangkum komponen awam dalam projek Vue saya harap ia akan membantu semua orang.

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