最近在學(xué)習(xí)nuxt井联，主要的原因是SPA（單頁應(yīng)用）不利于搜索引擎的SEO操作切省，Nuxt.js適合作新聞、博客蛔六、電影荆永、資訊這樣的需要搜索引擎提供流量的項目。
今天手把手跟我一起實現(xiàn)一個導(dǎo)航切換樣式吧国章！
腳手架安裝
參照官網(wǎng)：https://www.nuxtjs.cn/guide/installation
先來點假數(shù)據(jù)
navList: [
{ cate_name: '首頁', src: '/' },
{ cate_name: '文章', src: '/new' },
{ cate_name: '視頻', src: '/video' },
{ cate_name: '直播', src: '/live' }
],
目錄結(jié)構(gòu)大致如下：
目錄結(jié)構(gòu)
再封裝一個公共header
切換樣式使用nuxt-link實現(xiàn)具钥，大致代碼結(jié)構(gòu)如下：
<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組件
<publicHeader></publicHeader>
import publicHeader from '~/components/header'
components: {
publicHeader
},
審查元素，當(dāng)前頁面液兽，class樣式如下
直接修改樣式即可實現(xiàn)骂删，其余css代碼就不多展示了
.nuxt-link-exact-active.nuxt-link-active {
color:#3C7EFF;
border-bottom: 4px solid #3C7EFF;
padding-bottom: 2px;
}
看下效果
效果圖
