Comment utiliser Vue pour obtenir un effet de mise en évidence de la navigation par clic

Dans le développement front-end, la navigation est un élément essentiel. En tant qu'entrée principale d'un site Web ou d'une application, la conception et l'interaction de la navigation sont l'un des facteurs importants qui affectent l'expérience utilisateur. Cet article expliquera comment utiliser Vue pour obtenir l'effet de mise en surbrillance de la navigation par clic afin d'améliorer l'expérience interactive de l'utilisateur.

1. Préparation de l'environnement du projet

Avant de commencer, vous devez préparer un projet à l'aide de Vue. Vous pouvez utiliser des outils tels que Vue CLI pour créer rapidement un projet. Nous devons installer les bibliothèques Vue et Vue Router dans le projet.

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

2. Implémentez la mise en surbrillance de la navigation par clic

1. Définir le routage

Tout d'abord, vous devez configurer le routage pour la navigation. Ici, nous créons trois itinéraires, représentant respectivement la page d'accueil, la page d'actualités et la page de blog.

//导入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. Créer un composant de navigation

Ensuite, créez un composant de navigation et définissez le lien de routage qui doit être sauté dans le composant. La balise <router-link> est utilisée ici pour implémenter le saut d'itinéraire, et c'est également la clé pour obtenir l'effet de mise en évidence plus tard. <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>

définit une méthode isActive dans le composant, qui déterminera si la route actuelle est activée. Si l'itinéraire actuel est l'itinéraire correspondant à la navigation, ajoutez un nom de classe actif sinon, n'ajoutez pas de nom de classe ;

3. Ajouter un composant de navigation

Ajouter un composant de navigation à la section d'en-tête. Bootstrap est utilisé ici pour simplement concevoir la page.

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

Le code complet est le suivant :

rrreee

3. Affichage de l'effet

Après avoir terminé les étapes ci-dessus, nous pouvons effectuer des sauts de routage en cliquant sur la navigation, et également obtenir l'effet de cliquer sur la navigation pour mettre en surbrillance.

4. Résumé

Cet article explique comment utiliser Vue pour obtenir l'effet de surbrillance de la navigation par clic, rendant la page plus intuitive et facile à utiliser. La conception et l'interaction de la navigation sont un élément très important. En utilisant Vue et ses bibliothèques associées, il est très simple de mettre en évidence la navigation par clic. Dans les projets réels, nous pouvons réaliser des développements personnalisés en fonction des besoins réels pour répondre à différents types d'applications. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!