nuxt实现全局状态管理导航切换优化

这篇文章记录之前简单实现一个导航切换nuxt实现导航切换样式，现在已经不满足需求，跳转新闻详情的时候，导航样式就消失了，所以才有了这一篇，用vuex，router导航守卫afterEach实现。
在上一篇的基础上进行优化

实现思路：用全局状态处理，点击的时候增加一个标记，记录当前点击的导航，点击的时候更新状态，路由变化的时候（点击到详情页面，不在当前导航位置的时候）更新状态。

目录结构

目录

那么，Nuxt.js 自动生成的路由配置大致如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'new',
      path: '/new',
      component: 'pages/new/index.vue'
    },
    {
      name: 'new-id',
      path: '/new/:id',
      component: 'pages/new/_id.vue'
    },
    {
      name: 'video',
      path: '/video',
      component: 'pages/video/index.vue'
    },
    {
      name: 'video-id',
      path: '/video/:id',
      component: 'pages/video/_id.vue'
    },
    {
      name: 'live',
      path: '/live',
      component: 'pages/live/index.vue'
    },
    {
      name: 'live-id',
      path: '/live/:id',
      component: 'pages/live/_id.vue'
    },
  ]
}

实现步骤

首先先封装一个公共组件

• 数据格式

navList: [
  { cate_name: '首页', src: '/' },
  { cate_name: '文章', src: '/new' },
  { cate_name: '视频', src: '/video' },
  { cate_name: '直播', src: '/live' }
],

• header.vue
  添加一个点击事件，更新store中的状态，记录当前点击的index

<li @click="handleNav(index)" v-for="(item, index) in navList">
  <nuxt-link :to="item.src" :class="index == navActive ? 'active' : ''">
    <span>{{item.cate_name}}</span>
  </nuxt-link>
</li>

handleNav(index) {
  this.$store.commit('navList/SET_NAVACTIVE', index)
},

样式添加：

.active span {
  border-bottom: 4px solid #3C7EFF;
  padding-bottom: 2px;
}

store中逻辑编写

• state中定义一个navActive：0默认选中首页

const state = () => {
  return {
    navActive: 0,
  }
}

• mutations

const mutations = {
  SET_NAVACTIVE: (state, data) => {
    state.navActive = data
  }
}

添加route插件

nuxt路由自动生成，这个时候我们可以自己定义一个route插件

export default ({ app, store }) => {
  app.router.afterEach((to, from) => {
    console.log(to.path) // /new, /new/1, /video, /video/1, /live, /live/1
    let index = 0
    if(to.path == '/') {
      index = 0
    } else if(to.path.includes("new")) {
      index = 1
    } else if(to.path.includes("video")) {
      index = 2
    } else if(to.path.includes("live")) {
      index = 3
    }
    store.commit('navList/SET_NAVACTIVE', index)
  })
}

在nuxt.config中添加插件

{
  src: '@/plugins/route', 
  ssr: false
}

这样就实现了我想要的效果了，有更好的方法欢迎交流学习。