How to use Vue to achieve click navigation highlighting effect

In front-end development, navigation is an essential element. As the main entrance to a website or application, the design and interaction of navigation are one of the important factors that affect the user experience. This article will introduce how to use Vue to achieve the click navigation highlighting effect to improve the user's interactive experience.

1. Project environment preparation

Before starting, you need to prepare a project using Vue. You can use tools such as Vue CLI to quickly create a project. We need to install the Vue and Vue Router libraries in the project.

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

2. Implement click navigation highlighting

1. Set routing

First, you need to set routing to navigate. Here we create three routes, representing the homepage, news page and blog page respectively.

//导入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. Create navigation component

Next, create a navigation component and set the routing link that needs to be jumped in the component. The <router-link> tag is used here to implement route jump, and it is also the key to achieving the highlighting effect later.

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

defines a isActive method in the component, which will determine whether the current route is activated. If the current route is the route corresponding to the navigation, add a active class name; otherwise, do not add a class name.

3. Add navigation component

Add navigation component to the header part. Bootstrap is used here to simply design the 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>

The complete code is as follows:

<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. Effect display

After completing the above steps, we can perform routing jumps by clicking on the navigation, and at the same time, click Navigation highlighting effect.

4. Summary

This article introduces how to use Vue to achieve the click navigation highlighting effect, making the page more intuitive and easy to use. Navigation design and interaction are a very important part. By using Vue and its related libraries, it is very simple to realize click navigation highlighting. In actual projects, we can carry out customized development according to actual needs to meet different types of applications.

The above is the detailed content of How to use Vue to achieve click navigation highlighting effect. For more information, please follow other related articles on the PHP Chinese website!