So erzielen Sie mit Vue einen Hervorhebungseffekt für die Klicknavigation

In der Frontend-Entwicklung ist die Navigation ein wesentliches Element. Als Haupteingang zu einer Website oder Anwendung sind das Design und die Interaktion der Navigation einer der wichtigen Faktoren, die das Benutzererlebnis beeinflussen. In diesem Artikel wird erläutert, wie Sie mit Vue den Hervorhebungseffekt der Klicknavigation erzielen und so das interaktive Erlebnis des Benutzers verbessern.

1. Vorbereitung der Projektumgebung

Bevor Sie beginnen, müssen Sie ein Projekt mit Vue vorbereiten. Sie können Tools wie Vue CLI verwenden, um schnell ein Projekt zu erstellen. Wir müssen die Vue- und Vue-Router-Bibliotheken im Projekt installieren.

//安装 Vue
npm install vue
//安装 Vue Router
npm install vue-router

2. Implementieren Sie die Hervorhebung der Klicknavigation.

1. Routing festlegen

Zuerst müssen Sie das Routing für die Navigation einrichten. Hier erstellen wir drei Routen, die jeweils die Homepage, die Nachrichtenseite und die Blogseite darstellen.

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

//导入组件
import Home from '@/components/Home'
import News from '@/components/News'
import Blog from '@/components/Blog'

//使用Vue Router
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/news',
      name: 'News',
      component: News
    },
    {
      path: '/blog',
      name: 'Blog',
      component: Blog
    }
  ]
})

2. Navigationskomponente erstellen

Als nächstes erstellen Sie eine Navigationskomponente und legen den Routing-Link fest, der in der Komponente übersprungen werden muss. Das Tag <router-link> wird hier zum Implementieren des Routensprungs verwendet und ist auch der Schlüssel zum späteren Erzielen des Hervorhebungseffekts. <router-link>标签来实现路由跳转，同时也是后面实现高亮效果的关键。

<template>
  <div>
    <router-link to="/" tag="span" v-bind:class="{ active: isActive(&#39;/&#39;)}">首页 </router-link>
    <router-link to="/news" tag="span" v-bind:class="{ active: isActive(&#39;/news&#39;)}">新闻 </router-link>
    <router-link to="/blog" tag="span" v-bind:class="{ active: isActive(&#39;/blog&#39;)}">博客 </router-link>
  </div>
</template>

<script>
export default {
  methods: {
    isActive (path) {
      // 判断当前路由是否激活，如果是则添加类名，否则不添加
      return this.$route.path === path
    }
  }
}
</script>

<style>
 .active {
    color: red;
  }
</style>

在组件中定义了一个isActive方法，该方法会判断当前路由是否激活。如果当前路由是该导航所对应的路由，则添加一个active

<template>
  <div class="container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <router-link to="/" class="navbar-brand">Vue Router</router-link>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <Nav></Nav>
          </ul>
        </div>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import Nav from './Nav'
export default {
  name: 'app',
  components: {
      Nav
  }
}
</script>

definiert eine isActive-Methode in der Komponente, die bestimmt, ob die aktuelle Route aktiviert ist. Wenn es sich bei der aktuellen Route um die Route handelt, die der Navigation entspricht, fügen Sie einen aktiven-Klassennamen hinzu. Andernfalls fügen Sie keinen Klassennamen hinzu.

3. Navigationskomponente hinzufügen

Navigationskomponente zum Kopfbereich hinzufügen. Bootstrap wird hier verwendet, um die Seite einfach zu gestalten.

<template>
  <div class="container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <router-link to="/" class="navbar-brand">Vue Router</router-link>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <Nav></Nav>
          </ul>
        </div>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import Nav from './Nav'
export default {
  name: 'app',
  components: {
      Nav
  }
}
</script>

Der vollständige Code lautet wie folgt:

rrreee

3. Effektanzeige

Nachdem wir die obigen Schritte ausgeführt haben, können wir Routing-Sprünge durchführen, indem wir auf die Navigation klicken, und auch den Effekt erzielen, indem wir auf die Navigation klicken, um sie hervorzuheben.

4. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit Vue den Hervorhebungseffekt der Klicknavigation erzielen und die Seite intuitiver und benutzerfreundlicher gestalten können. Navigationsdesign und Interaktion sind ein sehr wichtiger Teil. Durch die Verwendung von Vue und den zugehörigen Bibliotheken ist es sehr einfach, die Hervorhebung der Klicknavigation zu realisieren. In tatsächlichen Projekten können wir maßgeschneiderte Entwicklungen gemäß den tatsächlichen Anforderungen durchführen, um verschiedene Arten von Anwendungen zu erfüllen. 🎜

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit Vue einen Hervorhebungseffekt für die Klicknavigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!