So navigieren Sie auf einer langen Vue-Seite

Vue ist ein Front-End-Framework, das es Entwicklern ermöglicht, reaktionsfähige Webanwendungen einfacher zu erstellen. In der tatsächlichen Entwicklung stoßen wir häufig auf relativ lange Seiten, die viele Inhalte enthalten, z. B. Tabellen, Listen, Diagramme usw. Ohne eine geeignete Navigationsmethode können sich Benutzer während der Nutzung verwirrt und unwohl fühlen. In diesem Artikel werden einige gängige Vue-Navigationsmethoden vorgestellt, um die Benutzererfahrung zu verbessern.

1. Anker-Navigation

Anker-Navigation, auch Anker-Scrolling-Effekt genannt, verwendet Link-Anker, um zwischen internen Seiten zu springen. Wenn der Benutzer auf einen Link auf der Seite klickt, scrollt die Seite automatisch zur entsprechenden Position und erzielt so den Navigationseffekt.

Es gibt zwei Möglichkeiten, die Ankernavigation in Vue zu implementieren. Eine besteht darin, den Vue-Router zu verwenden und sie durch die Konfiguration des Routings zu implementieren. Die andere besteht darin, Vue-Anweisungen zu verwenden und Anweisungen direkt in der Vorlage aufzurufen. Hier nehmen wir die Vue-Anweisung als Beispiel zur Einführung.

(1) Definieren Sie den Ankerpunkt Die Navigation muss wie unten gezeigt implementiert werden:

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

(3) Definieren Sie die Scroll-Anweisung.

Definieren Sie die benutzerdefinierte Anweisung v-scroll-to in der Vue-Instanz und verwenden Sie die Funktion scrollTop, um den Scroll-Effekt der Seite zu erzielen. wie unten gezeigt:

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

(4) Rufen Sie die Anweisung

in auf. Verwenden Sie die v-scroll-to-Direktive in der Vorlage, um den Navigationseffekt aufzurufen, wie unten gezeigt:

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

Sidebar-Navigation

Sidebar-Navigation ist ein gängige Art der Website-Navigation, bei der die Navigationsleiste in der Seitenleiste platziert wird und Navigationselemente in Form einer Liste angezeigt werden.

Es gibt zwei Möglichkeiten, die Seitenleistennavigation in Vue zu implementieren. Eine besteht darin, die Navigationsleistenkomponente manuell zu schreiben. Die andere besteht darin, die vom Vue-UI-Framework bereitgestellte Navigationsleistenkomponente zu verwenden (z. B. Element UI, Bootstrap Vue usw.). . Hier nehmen wir die Element-Benutzeroberfläche als Beispiel zur Einführung.
2. (1) Element UI installieren

Bevor Sie Element UI in einem Vue-Projekt verwenden, müssen Sie zunächst Element UI installieren. Sie können es mit dem folgenden Befehl installieren:

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

(2) Element UI-Komponenten einführen

Element einführen in der Vue-Instanz -ui-Komponente, wie unten gezeigt:

npm install element-ui -S

(3) Seitenleistenkomponente hinzufügen

Verwenden Sie die el-aside-Komponente als Seitenleistencontainer und die el-menu-Komponente als Seitenleisten-Navigationselement, wie unten gezeigt:

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

Vue.use(ElementUI);

(4 ) Routing konfigurieren

Zusätzlich zum Hinzufügen von Komponenten müssen Sie auch das Routing konfigurieren, wie unten gezeigt:

<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>

Navigation „Zurück zur Oberseite“

Die Navigation „Zurück zur Oberseite“ ist eine relativ einfache Navigationsmethode. Fügen Sie sie unten hinzu Die Seite Eine fest positionierte Schaltfläche zum Zurückkehren zum Anfang, mit der Benutzer beim Scrollen jederzeit auf die Schaltfläche klicken können, um zum Anfang der Seite zurückzukehren.

Es gibt zwei Möglichkeiten, die Navigation nach oben in Vue zu implementieren: Eine besteht darin, die Komponentenimplementierung manuell zu schreiben, und die andere darin, ein Vue-Plug-In zu verwenden, um sie zu implementieren. Hier stellen wir die Verwendung des Vue-Plug-Ins vor.
3. (1) Installieren Sie das Vue-Plugin

Bevor Sie das Back-to-Top-Plugin im Vue-Projekt verwenden, müssen Sie es zuerst installieren. Sie können es über den folgenden Befehl installieren:

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
})

( 2) Führen Sie das Vue-Plug-in ein.

Führen Sie es in das Vue-Plug-in von main.js ein, wie unten gezeigt:

npm install vue-backtotop --save

(3) Fügen Sie eine Back-to-Top-Komponente hinzu.

Verwenden Sie eine Back-to-Top-Komponente auf der Seite Hier müssen Sie die Back-to-Top-Funktion hinzufügen, wie unten gezeigt:

import VueBackToTop from 'vue-backtotop'

Vue.use(VueBackToTop)

Durch die oben genannten drei Möglichkeiten können wir verschiedene Seitennavigationsmethoden im Vue-Projekt implementieren, um Benutzern ein besseres Erlebnis zu bieten. In der tatsächlichen Entwicklung muss die zu verwendende spezifische Navigationsmethode entsprechend der spezifischen Situation beurteilt werden, um den besten Benutzerinteraktionseffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonSo navigieren Sie auf einer langen Vue-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!