Penggunaan Vue-router dalam projek dan langkah berjaga-jaganya

Penggunaan Vue-router dalam projek dan langkah berjaga-jaga

Vue-router ialah pengurus penghalaan rasmi Vue.js, digunakan untuk membina aplikasi satu halaman (Aplikasi Halaman Tunggal). Ia mengurus URL dan merealisasikan lompatan bebas muat semula antara halaman, membantu kami membina aplikasi bahagian hadapan yang lebih fleksibel dan interaktif.

1. Gunakan Vue-router

1. Pasang Vue-router

Dalam direktori root projek, gunakan arahan npm untuk memasang:

npm install vue-router

2. seperti main.js ) Memperkenalkan Vue-router dan komponen yang berkaitan:

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

Dalam kod di atas, kami mengkonfigurasikan dua laluan: home dan about, dan komponen yang sepadan ialah Home dan About.

3. Konfigurasikan eksport penghalaan

Dalam komponen akar projek (seperti App.vue), tambah teg untuk memaparkan komponen penghalaan yang berbeza:

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

2. Contoh penggunaan

Kes mudah akan digabungkan untuk menunjukkan cara menggunakan Vue-router.

Ambil tapak web untuk menonton filem dalam talian sebagai contoh Kami perlu melaksanakan dua halaman: halaman utama dan halaman butiran filem.

1. Cipta komponen halaman utama

Buat fail Home.vue dalam direktori src/views dan tambahkan kod berikut:

<template>
  <div class="home">
    <h1>欢迎来到电影在线观看网站</h1>
    <button @click="goToDetail">查看电影详情</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      this.$router.push('/detail')
    }
  }
}
</script>

2 Cipta komponen halaman butiran filem

Buat fail Detail.vue dalam src /lihat direktori dan tambahkan kod berikut:

<template>
  <div class="detail">
    <h1>电影详情页</h1>
    <p>电影名称：{{ movie.name }}</p>
    <p>导演：{{ movie.director }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movie: {
        name: '复仇者联盟',
        director: '乔·罗素'
      }
    }
  }
}
</script>

3. Konfigurasikan penghalaan

Dalam main.js, perkenalkan komponen rumah dan perincian dan konfigurasikan penghalaan:

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/detail',
    name: 'detail',
    component: Detail
  }
]

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

export default router

4. Jalankan projek

Jalankan arahan npm run dalam baris arahan untuk memulakan projek, dan kemudian Lawati http://localhost:8080 dalam penyemak imbas untuk melihat halaman utama.

Klik butang "Lihat Butiran Filem" untuk melompat ke halaman butiran filem dan memaparkan nama dan pengarah filem. Nota

const router = new VueRouter({
  mode: 'history',
  routes
})

2. Penghalaan dinamik

Vue-router membolehkan penggunaan penghalaan dinamik untuk mencapai lonjakan halaman yang lebih fleksibel. Sebagai contoh, anda boleh menghantar ID filem melalui parameter penghalaan untuk memberikan maklumat terperinci tentang filem yang sepadan dalam halaman butiran filem.

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

// 传递参数
this.$router.push('/detail/123')

// 获取参数
this.$route.params.id

3. Penghalaan bersarang

Vue-router menyokong penghalaan bersarang, yang boleh memuatkan komponen lain di dalam komponen untuk mencapai struktur halaman yang lebih kompleks. Sebagai contoh, anda boleh memuatkan komponen ulasan dalam halaman butiran filem.

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail,
    children: [
      {
        path: 'comment',
        component: Comment
      }
    ]
  }
]

Di atas adalah penggunaan Vue-router dalam projek dan langkah berjaga-jaganya. Dengan mengkonfigurasi laluan dan komponen, kami boleh mencapai lompatan bebas muat semula antara halaman dan meningkatkan pengalaman pengguna. Pada masa yang sama, Vue-router juga menyokong penghalaan dinamik dan penghalaan bersarang, membolehkan kami membina aplikasi bahagian hadapan yang lebih kaya dan lebih kompleks. Saya harap artikel ini akan membantu anda memahami dan menggunakan Vue-router!

Atas ialah kandungan terperinci Penggunaan Vue-router dalam projek dan langkah berjaga-jaganya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!