Vue-Router: Bagaimana untuk menggunakan mod sejarah untuk melaksanakan penghalaan tanpa muat semula?

Vue-Router: Bagaimana untuk menggunakan mod sejarah untuk melaksanakan penghalaan tanpa muat semula?

Pengenalan:
Sebagai rangka kerja JavaScript yang popular, Vue.js telah digunakan secara meluas dalam pembangunan bahagian hadapan. Dalam Vue.js, Vue-Router ialah alat yang sangat penting, yang boleh melaksanakan pengurusan penghalaan aplikasi satu halaman (SPA). Dalam Vue-Router, terdapat dua mod untuk dipilih, satu ialah mod cincang dan satu lagi ialah mod sejarah. Artikel ini akan membincangkan secara terperinci cara menggunakan mod sejarah Vue-Router untuk melaksanakan penghalaan bebas muat semula dan memberikan contoh kod khusus.

1. Memahami mod sejarah
   Apabila menggunakan mod sejarah dalam Vue-Router, tiada # aksara dalam URL, tetapi API Sejarah penyemak imbas digunakan untuk penukaran navigasi. Dalam mod ini, laluan kelihatan lebih cantik dan lebih dekat dengan laluan URL tradisional.
2. Mula menggunakan mod sejarah
   Menggunakan mod sejarah adalah sangat mudah Anda hanya perlu menetapkan atribut mod kepada 'sejarah' apabila membuat tika Penghala Vue. Contohnya:

//引入Vue和Vue-Router
import Vue from 'vue'
import Router from 'vue-router'

//在Vue中使用Vue-Router插件
Vue.use(Router)

//定义路由
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

//创建Vue实例，并将router实例添加到Vue实例中
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3. Konfigurasikan pelayan
   Apabila menggunakan mod sejarah, anda perlu mengkonfigurasi pelayan untuk membalas permintaan URL. Kerana dalam mod sejarah, apabila memuat semula halaman atau mengakses URL terus, permintaan akan dihantar ke pelayan, jadi pelayan perlu dikonfigurasikan untuk mengembalikan halaman utama yang sama (seperti index.html).

Dalam perisian pelayan biasa, seperti Apache dan Nginx, ini boleh dicapai melalui fail konfigurasi. Berikut ialah contoh konfigurasi pelayan Apache:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

4. Lompat halaman tanpa menyegarkan
   Selepas menggunakan mod sejarah, Vue-Router akan mendengar secara automatik peristiwa navigasi penyemak imbas, dan apabila pengguna mengklik pautan dalam halaman, komponen itu akan diberikan. Togol tanpa memuat semula keseluruhan halaman, mendayakan penghalaan tanpa muat semula.

Andaikan kita mempunyai dua halaman: Laman Utama dan Perihal. Dalam halaman Utama, kita boleh menambah butang yang memaut ke halaman Perihal:

<template>
  <div>
    <h1>Welcome to Home Page!</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

Dalam halaman Perihal, kita juga boleh menambah butang yang memaut ke halaman Utama:

<template>
  <div>
    <h1>Welcome to About Page!</h1>
    <router-link to="/">Home</router-link>
  </div>
</template>

Apabila pengguna mengklik pautan ini, halaman tidak akan menyegarkan Tukar terus kepada komponen yang sepadan.

5. Ringkasan
   Mod sejarah Vue-Router melaksanakan penukaran laluan tanpa muat semula dengan menggunakan API Sejarah penyemak imbas. Menggunakan mod sejarah boleh menjadikan URL kelihatan lebih cantik dan lebih dekat dengan laluan URL tradisional. Apabila menggunakan mod sejarah, anda perlu mengkonfigurasi pelayan supaya ia mengembalikan halaman utama yang sama untuk membalas permintaan URL. Dengan menggunakan komponen pautan penghala yang disediakan oleh Vue-Router, kami boleh melaksanakan penghalaan tanpa muat semula dengan mudah.

Dengan langkah di atas, anda boleh menggunakan mod sejarah Vue-Router dengan mudah untuk melaksanakan penghalaan tanpa muat semula. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Vue-Router: Bagaimana untuk menggunakan mod sejarah untuk melaksanakan penghalaan tanpa muat semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!