vue melaksanakan penatalan sauh

Kata Pengantar

Terdapat banyak cara untuk melaksanakan penatalan sauh halaman, tetapi bagaimanakah Vue melaksanakannya? Dalam Vue, kita boleh menggunakan Penghala Vue untuk melaksanakan penatalan sauh. Di bawah, saya akan menunjukkan kepada anda cara melaksanakan penatalan sauh dalam Vue melalui demonstrasi kod.

Langkah 1: Pasang Penghala Vue

Sebelum menggunakan Penghala Vue, anda perlu memasangnya terlebih dahulu. Kami boleh memasang Vue Router melalui arahan berikut:

npm install vue-router

atau

yarn add vue-router

Langkah 2: Konfigurasi Vue Router

Selepas memasang Vue Router, anda perlu mengkonfigurasi Vue Router dalam kod . Dalam Vue, kita perlu memperkenalkan dan menggunakan Penghala Vue dalam fail main.js, seperti berikut:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

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

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

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

Dalam kod di atas, kami mentakrifkan tiga laluan, iaitu '/' dan '/about' ,'/ kenalan'. Antaranya, setiap laluan sepadan dengan komponen: Rumah, Perihal, Kenalan.

Langkah 3: Tentukan sauh halaman

Dalam Vue, mentakrifkan sauh halaman memerlukan penambahan atribut id pada elemen HTML, seperti ditunjukkan di bawah:

<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

Langkah Empat: Tentukan pautan lompat anchor

Dalam Vue, kami boleh menjana pautan melalui komponen <router-link>. Kita perlu mentakrifkan komponen <router-link> untuk melaksanakan lompatan sauh halaman, seperti berikut:

<router-link to="#section1">Section 1</router-link>
<router-link to="#section2">Section 2</router-link>
<router-link to="#section3">Section 3</router-link>

Dalam kod di atas, kami menggunakan atribut to untuk mentakrifkan alamat pautan, dan nilainya ialah id sauh.

Langkah 5: Laksanakan penatalan sauh

Dalam Vue, kami boleh melaksanakan penatalan sauh melalui fungsi cangkuk. Kita perlu menatal ke titik anchor selepas setiap lompatan laluan selesai. Fungsi cangkuk boleh ditakrifkan dalam penghalaan Vue Kod khusus adalah seperti berikut:

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // 定义滚动操作,这里的to和from都是路由信息对象
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      // 滚动到指定的锚点
      return { selector: to.hash }
    } else {
      // 没有指定锚点则返回屏幕最上方
      return { x: 0, y: 0 }
    }
  }
})

Dalam kod di atas, kami mentakrifkan operasi menatal melalui scrollBehavior. Apabila terdapat atribut cincang dalam objek penghalaan, iaitu, apabila penghalaan melompat ke titik anchor yang ditentukan, operasi menatal akan dilakukan.

Kesimpulan

Pada ketika ini, kami telah melengkapkan kod untuk melaksanakan penatalan sauh halaman dalam Vue. Melalui fungsi berkuasa Vue Router, kami boleh melaksanakan penatalan sauh dengan mudah untuk meningkatkan pengalaman pengguna. Jika anda mempunyai kaedah pelaksanaan lain, sila kongsikannya dengan semua orang.

Atas ialah kandungan terperinci vue melaksanakan penatalan sauh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!