nuxt实现导航切换样式


最近在学习nuxt，主要的原因是SPA（单页应用）不利于搜索引擎的SEO操作，Nuxt.js适合作新闻、博客、电影、资讯这样的需要搜索引擎提供流量的项目。
今天手把手跟我一起实现一个导航切换样式吧！

脚手架安装

参照官网：https://www.nuxtjs.cn/guide/installation

先来点假数据

1
2
3
4
5
6
navList: [
      { cate_name: '首页', src: '/' },
      { cate_name: '文章', src: '/new' },
      { cate_name: '视频', src: '/video' },
      { cate_name: '直播', src: '/live' }
 ],

目录结构大致如下：


目录结构

再封装一个公共header

切换样式使用nuxt-link实现，大致代码结构如下：

1
2
3
4
5
6
7
<ul>
   <li @click="handleNav(index)" v-for="(item, index) in navList">
        <nuxt-link :to="item.src">
           <span>{{item.cate_name}}</span>
         </nuxt-link>
     </li>
</ul>

index.vue中引入header组件

1
2
3
4
5
6
7
<publicHeader></publicHeader>

import publicHeader from '~/components/header'

components: {
  publicHeader
},

审查元素，当前页面，class样式如下


直接修改样式即可实现，其余css代码就不多展示了

1
2
3
4
5
.nuxt-link-exact-active.nuxt-link-active {
  color:#3C7EFF;
  border-bottom: 4px solid #3C7EFF;
  padding-bottom: 2px;
}

看下效果

效果图