Bagaimana untuk mengkonfigurasi pengepala apabila vue melompat

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi satu halaman (SPA). Dalam Vue, navigasi aplikasi dan lompatan halaman dikawal melalui penghalaan. Apabila pengguna melompat ke halaman melalui penghalaan Vue, bagaimana untuk mengkonfigurasi pengepala? Artikel ini akan memperkenalkan secara terperinci cara mengkonfigurasi pengepala apabila laluan Vue melompat.

Apakah itu Penghala Vue?

Vue Router ialah perpustakaan pengurusan penghalaan rasmi Vue Ia boleh memadankan laluan berdasarkan URL dan kemudian memaparkan komponen yang sepadan. Penghala Vue boleh membantu kami menukar antara halaman dan lulus parameter Ia juga boleh melaksanakan beberapa fungsi lanjutan, seperti pengawal laluan, pemuatan laluan yang malas, dsb.

Langkah untuk menggunakan Penghala Vue

Langkah 1: Buat projek Vue

Jika anda sudah menggunakan Vue.js untuk membina projek, anda boleh melangkau langkah ini. Jika anda baru, sila pasang Vue.js dahulu. Untuk kaedah pemasangan khusus, sila rujuk laman web rasmi https://cn.vuejs.org/.

Langkah 2: Pasang Penghala Vue

Kita boleh memasang Penghala Vue melalui pengurus pakej npm, masukkan arahan berikut:

$ npm install vue-router -save

Langkah 3: Cipta Penghala Vue contoh

Menggunakan Penghala Vue dalam Vue.js adalah sangat mudah, anda hanya perlu mencipta tika Penghala Vue, yang akan bertanggungjawab untuk mengurus semua laluan kami. Perkenalkan Vue Router dalam fail main.js dan buat contoh Vue Router seperti berikut:

import Vue from 'vue'; // 导入Vue
import VueRouter from 'vue-router'; // 导入Vue Router
import App from './App.vue'; // 导入根组件
import routes from './routes'; // 导入路由配置

Vue.use(VueRouter); // 安装Vue Router

const router = new VueRouter({
  routes // 配置路由规则
});

new Vue({
  el: '#app',
  router, // 注入路由实例
  render: h => h(App) // 渲染根组件
});

Dalam kod di atas, kami mula-mula mengimport Vue, Vue Router, komponen App dan fail konfigurasi penghalaan.

Kemudian, kami memasang Penghala Vue melalui Vue.use(VueRouter). Seterusnya, kami mencipta tika Vue Router melalui VueRouter() baharu dan menghantar konfigurasi penghalaan kepada tika itu.

Akhir sekali, kami menyuntik contoh laluan ke dalam pilihan penghala dalam komponen akar. Dengan cara ini, kami boleh menggunakan contoh Penghala Vue sepanjang aplikasi kami.

Langkah 4: Tentukan peraturan penghalaan

Sangat mudah untuk mentakrifkan peraturan penghalaan dalam Penghala Vue Kita hanya perlu menentukan tatasusunan dalam fail konfigurasi penghalaan Setiap elemen dalam tatasusunan mewakili a peraturan penghalaan , seperti yang ditunjukkan di bawah:

import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';
import NotFound from './views/NotFound.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  },
  {
    path: '*',
    name: 'not-found',
    component: NotFound
  }
];

export default routes;

Dalam kod di atas, kami mentakrifkan empat peraturan penghalaan: '/', '/about', '/contact', ''. Antaranya, '/' bermaksud halaman utama dan '' bermaksud halaman 404.

Langkah 5: Gunakan komponen penghalaan

Dalam Penghala Vue, setiap peraturan penghalaan boleh sepadan dengan komponen. Apabila kami mentakrifkan peraturan penghalaan, kami telah menentukan komponen yang sepadan dengan setiap peraturan penghalaan. Sekarang, kita perlu menggunakan komponen penghalaan dalam komponen App.vue untuk memaparkan halaman yang berbeza.

Dalam App.vue, kami menggunakan teg untuk memaparkan komponen yang sepadan dengan peraturan penghalaan semasa, seperti yang ditunjukkan di bawah:

<template>
  <div id="app">
    <header>
      <!-- 配置header -->
    </header>
    <router-view></router-view>
  </div>
</template>

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

Dalam kod di atas, kami Komponen Vue digunakan dalam teg dan Vue akan memaparkan komponen penghalaan yang berbeza secara dinamik melalui peraturan penghalaan. Anda juga boleh menambah beberapa kod HTML statik dan gaya CSS di sini untuk membina pengepala.

Langkah 6: Konfigurasikan pengepala

Vue Router menyediakan cangkuk global beforeEach(), yang dilaksanakan sebelum laluan melompat. Kami boleh mengubah suai kandungan pengepala dalam cangkuk ini secara dinamik.

Tambah kod berikut dalam fail main.js:

router.beforeEach((to, from, next) => {
  const title = to.meta.title;

  if (title) {
    document.title = title;
  }

  next();
});

Dalam kod di atas, kami menentukan sama ada atribut meta ditakrifkan dalam peraturan penghalaan semasa Jika ia ditakrifkan, kemudian meta Nilai tajuk dalam atribut diberikan kepada pengepala.

Ringkasan

Artikel ini memperincikan cara mengkonfigurasi pengepala apabila Vue Router melompat. Kami boleh menggunakan teg yang disediakan oleh Vue Router untuk memaparkan komponen penghalaan secara dinamik, dan pada masa yang sama, mengubah suai kandungan pengepala dalam cangkuk global beforeEach() secara dinamik untuk mencapai pengalaman pengguna yang lebih baik. Saya harap artikel ini dapat membantu anda mengkonfigurasi pengepala apabila menggunakan Penghala Vue.

Atas ialah kandungan terperinci Bagaimana untuk mengkonfigurasi pengepala apabila vue melompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!