Bagaimana untuk melaksanakan navigasi dalam Vue

Vue ialah rangka kerja JavaScript yang sesuai untuk membangunkan aplikasi satu halaman, jadi bahagian penting ialah navigasi. Dalam Vue, anda boleh menggunakan Penghala Vue untuk melaksanakan navigasi. Berikut ialah langkah tentang cara melaksanakan navigasi dalam Vue.

Langkah 1: Pasang Penghala Vue

Anda boleh menggunakan npm atau benang untuk memasang Penghala Vue dalam projek Vue anda. Dalam terminal atau baris arahan, masukkan arahan berikut:

npm install vue-router -save 或
yarn add vue-router

Langkah 2: Buat tika Vue Router

Dalam projek anda, anda perlu mencipta tika Vue Router. Buka fail main.js dalam projek dan masukkan kod berikut:

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

Vue.use(VueRouter);

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

Apa yang anda lakukan ialah mengimport Vue dan Vue Router, dan buat contoh Vue Router dan tentukan laluan. Sila ambil perhatian bahawa penghalaan ialah atribut bagi contoh Penghala Vue, dan atribut laluan digunakan untuk menentukan laluan penghalaan, atribut nama digunakan untuk menentukan nama laluan dan atribut komponen digunakan untuk menentukan komponen, seperti Laman Utama , Perihal, dsb.

Langkah 3: Tetapkan penghalaan

Dalam projek Vue, anda perlu menetapkan penghalaan. Buka fail App.vue dan tambah kod berikut:

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

Apa yang dilakukannya ialah menambah pautan dalam bar navigasi menggunakan teg pautan penghala. Laluan ditentukan menggunakan atribut to, dalam contoh ini kita mempunyai pautan ke "/" dan "/ about". Selain itu, gunakan komponen paparan penghala untuk memuatkan komponen penghalaan yang dipilih.

Langkah 4: Gunakan penghalaan

Sekarang anda telah mencipta tika Vue Router, sediakan penghalaan dan pautan, anda boleh menggunakan penghalaan dalam komponen anda. Buka fail Home.vue dan tambah kod berikut:

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to my home page!</p>
  </div>
</template>

Sekarang buka About.vue dan tambah kod berikut:

<template>
  <div>
    <h1>About Page</h1>
    <p>Welcome to my about page!</p>
  </div>
</template>

Sekarang buka main.js dan tambah kod berikut :

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Sila ambil perhatian bahawa kami telah menyuntik tika penghala ke dalam tika Vue dan menggunakan kaedah $mount() untuk melekapkan tika Vue pada elemen #app aplikasi.

Sekarang mulakan semula aplikasi Vue anda dan navigasi ke laluan "/" dan "/about" dalam penyemak imbas anda, anda akan melihat halaman Laman Utama dan Perihal.

Dalam artikel ini, anda mempelajari cara melaksanakan navigasi dalam aplikasi Vue. Langkah-langkahnya termasuk memasang Penghala Vue, mencipta tika Penghala Vue, menyediakan penghalaan dan menggunakan penghalaan. Kini anda boleh menambah navigasi dalam aplikasi Vue anda untuk membolehkan pengguna menavigasi aplikasi dengan mudah dan mengakses halaman yang diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan navigasi dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!