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>

3. Ajouter un composant de navigation

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

rrreee

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!