Bagaimana untuk menavigasi halaman vue yang panjang

Vue ialah rangka kerja bahagian hadapan yang membolehkan pembangun membina aplikasi web responsif dengan lebih mudah. Dalam pembangunan sebenar, kami sering menemui beberapa halaman yang agak panjang yang mengandungi banyak kandungan, seperti jadual, senarai, carta, dll. Tanpa kaedah navigasi yang sesuai, pengguna mungkin berasa keliru dan tidak selesa semasa digunakan. Artikel ini akan memperkenalkan beberapa kaedah navigasi Vue biasa untuk meningkatkan pengalaman pengguna.

1. Navigasi sauh

Navigasi sauh, juga dikenali sebagai kesan tatal sauh, menggunakan sauh pautan untuk melompat antara halaman dalaman. Apabila pengguna mengklik pautan pada halaman, halaman akan secara automatik menatal ke kedudukan yang sepadan, sekali gus mencapai kesan navigasi.

Terdapat dua cara untuk melaksanakan navigasi sauh dalam Vue Satu ialah menggunakan Penghala Vue dan melaksanakannya dengan mengkonfigurasi penghalaan; Di sini kami mengambil arahan Vue sebagai contoh untuk diperkenalkan.

(1) Tentukan titik sauh

Tambahkan titik sauh di lokasi yang anda ingin lompat pada halaman, seperti yang ditunjukkan di bawah:

<div id="article1"></div>

(2 ) Tentukan pautan navigasi

Tambahkan pautan di mana navigasi perlu dilaksanakan, seperti yang ditunjukkan di bawah:

<router-link to="#article1">文章1</router-link>

(3) Tentukan arahan menatal

Tentukan arahan tersuai v- dalam contoh Vue tatal-ke, gunakan fungsi tatal atas untuk mencapai kesan tatal halaman, seperti yang ditunjukkan di bawah:

Vue.directive('scroll-to', {
  bind: function (el, binding) {
    el.addEventListener('click', function () {
      document.documentElement.scrollTop = document.getElementById(binding.value).offsetTop
    })
  }
})

(4) Panggil arahan

Gunakan v- arahan tatal ke dalam templat untuk memanggil navigasi Kesannya adalah seperti berikut:

<a href="#" v-scroll-to="&#39;article1&#39;">文章1</a>

2. Navigasi bar sisi

Navigasi bar sisi ialah cara biasa navigasi tapak web, yang meletakkan bar navigasi Dalam bar sisi halaman, item navigasi dipaparkan dalam bentuk senarai.

Terdapat dua cara untuk melaksanakan navigasi bar sisi dalam Vue Satu ialah menulis komponen bar navigasi secara manual; yang lain adalah dengan menggunakan komponen bar navigasi yang disediakan oleh rangka kerja UI Vue (seperti UI Elemen, Bootstrap Vue. , dsb.). Di sini kami mengambil UI Elemen sebagai contoh untuk diperkenalkan.

(1) Pasang UI Elemen

Sebelum menggunakan UI Elemen dalam projek Vue, anda perlu memasang UI Elemen dahulu Anda boleh memasangnya melalui arahan berikut:

npm install element-ui -S

( 2) Perkenalkan komponen UI Elemen

Perkenalkan komponen elemen-ui dalam contoh Vue, seperti ditunjukkan di bawah:

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

(3) Tambah komponen bar sisi

menggunakan Komponen el-aside berfungsi sebagai bekas bar sisi dan komponen el-menu berfungsi sebagai item navigasi bar sisi, seperti yang ditunjukkan di bawah:

<el-aside>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :router="true"
    :collapse="collapse"
    background-color="#EDF0F5"
    text-color="#000"
    active-text-color="#409EFF">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">导航一</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="/index1-1">选项1</el-menu-item>
        <el-menu-item index="/index1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组二">
        <el-menu-item index="3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="4">
        <template slot="title">选项4</template>
        <el-menu-item index="/index1-3">选项4-1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </template>
      <el-menu-item index="/index2-1">选项1</el-menu-item>
      <el-menu-item index="/index2-2">选项2</el-menu-item>
      <el-menu-item index="/index2-3">选项3</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </template>
      <el-menu-item index="/index3-1">选项1</el-menu-item>
      <el-menu-item index="/index3-2">选项2</el-menu-item>
      <el-menu-item index="/index3-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</el-aside>

(4) Konfigurasikan penghalaan

Selain menambah komponen, anda juga perlu mengkonfigurasi penghalaan, seperti yang ditunjukkan di bawah:

const routes = [
  { path: '/index1-1', component: Index1 },
  { path: '/index1-2', component: Index1 },
  { path: '/index1-3', component: Index1 },
  { path: '/index2-1', component: Index2 },
  { path: '/index2-2', component: Index2 },
  { path: '/index2-3', component: Index2 },
  { path: '/index3-1', component: Index3 },
  { path: '/index3-2', component: Index3 },
  { path: '/index3-3', component: Index3 },
]
const router = new VueRouter({
  routes
})

3. Navigasi kembali ke atas

Navigasi kembali ke atas ialah kaedah navigasi yang agak mudah, pada halaman Tambah butang kembali ke atas kedudukan tetap di bahagian bawah Apabila pengguna menatal halaman, mereka boleh mengklik butang untuk kembali ke bahagian atas halaman pada bila-bila masa.

Terdapat dua cara untuk melaksanakan navigasi kembali ke atas dalam Vue, satu ialah menulis pelaksanaan komponen secara manual dan satu lagi ialah menggunakan pemalam Vue untuk melaksanakannya. Di sini kami memperkenalkan cara menggunakan pemalam Vue.

(1) Pasang pemalam Vue

Sebelum menggunakan pemalam belakang ke atas dalam projek Vue, anda perlu memasang pemalam itu terlebih dahulu. Anda boleh memasangnya melalui arahan berikut:

npm install vue-backtotop --save

(2) Perkenalkan pemalam Vue

Perkenalkan pemalam Vue dalam main.js, seperti yang ditunjukkan di bawah:

import VueBackToTop from 'vue-backtotop'

Vue.use(VueBackToTop)

(3) Tambah komponen belakang ke atas

apabila perlu Gunakan komponen belakang ke atas dalam halaman yang menambah fungsi belakang ke atas, seperti ditunjukkan di bawah:

<back-to-top></back-to-top>

Melalui tiga kaedah di atas, kami boleh melaksanakan kaedah navigasi halaman yang berbeza dalam projek Vue untuk menyediakan pengguna dengan Menyediakan pengalaman pengguna yang lebih baik. Dalam pembangunan sebenar, kaedah navigasi khusus yang akan digunakan perlu dinilai mengikut situasi khusus untuk mencapai kesan interaksi pengguna yang terbaik.

Atas ialah kandungan terperinci Bagaimana untuk menavigasi halaman vue yang panjang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!