vue实现导航栏效果(选中状态刷新不消失)

Vue实现导航栏效果，一般情况下会根据当前路由的路径来判断当前页面是否高亮选中，但是在刷新页面后，状态会丢失。下面是实现选中状态刷新不消失的完整攻略。

步骤一：路由配置

首先，需要定义好路由配置，这里以vue-router为例。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/product',
    name: 'Product',
    component: () => import('@/views/Product.vue')
  },
  // other routes
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

步骤二：导航栏组件

接着，需要定义导航栏组件，这里假设导航栏组件名为NavMenu。

<template>
  <div>
    <router-link to="/" :class="{ active: $route.path === '/' }">Home</router-link>
    <router-link to="/about" :class="{ active: $route.path === '/about' }">About</router-link>
    <router-link to="/product" :class="{ active: $route.path === '/product' }">Product</router-link>
    <!-- other links -->
  </div>
</template>

<script>
export default {
  name: 'NavMenu'
}
</script>

<style>
.active {
  /* 导航栏选中状态的样式 */
}
</style>

上面的代码中，router-link标签会渲染成一个超链接，在点击该链接时，会夹带一个to属性值，这个值决定了路由的跳转。:class="{ active: $route.path === '/' }"用来给导航栏设置选中状态的样式。$route.path可以获取当前路由的路径，并与当前导航栏的路径匹配，如果匹配成功，则给该导航栏添加active类名，然后在style标签中定义该类名的样式。

步骤三：vuex存储选中状态

当我们刷新页面后，路由状态会丢失，因此需要通过vuex来存储导航栏选中状态。在store文件夹下创建一个nav.js的文件，代码如下：

const state = {
  // 选中的导航栏路由路径
  activePath: '/'
}

const mutations = {
  setActivePath(state, payload) {
    state.activePath = payload.path
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

步骤四：使用vuex存储选中状态

在NavMenu组件中引入vuex，并用mapState和mapMutations来映射vuex中的state和mutations。

<template>
  <div>
    <router-link to="/" :class="{ active: activePath === '/' }" @click.native="setActivePath('/')">Home</router-link>
    <router-link to="/about" :class="{ active: activePath === '/about' }" @click.native="setActivePath('/about')">About</router-link>
    <router-link to="/product" :class="{ active: activePath === '/product' }" @click.native="setActivePath('/product')">Product</router-link>
    <!-- other links -->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'NavMenu',

  computed: {
    ...mapState({
      activePath: state => state.nav.activePath
    })
  },

  methods: {
    ...mapMutations({
      setActivePath: 'nav/setActivePath'
    })
  }
}
</script>

上面的代码中，当点击导航栏链接时，会调用setActivePath方法，更新vuex中的activePath值。而NavMenu组件中的router-link标签的class属性绑定的是activePath的值，这也就是为什么选中状态刷新不会消失的原因。

示例一：使用keep-alive缓存组件

在实际开发中，某些情况下需要缓存组件状态（比如表单中填写的内容），可以使用keep-alive来缓存组件状态。

在App.vue根组件中添加keep-alive标签，这样就可以缓存组件状态，防止刷新后数据丢失。

<template>
  <div id="app">
    <NavMenu />
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import NavMenu from '@/components/NavMenu.vue'

export default {
  name: 'App',

  components: {
    NavMenu
  }
}
</script>

示例二：使用localStorage存储状态

在vuex的store文件夹下再创建一个localStorage.js的文件，代码如下：

const localStoragePlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.type === 'nav/setActivePath') {
      localStorage.setItem('activePath', state.nav.activePath)
    }
  })
}

export default localStoragePlugin

上面的代码中，定义了一个localStoragePlugin插件，在vuex中每次调用setActivePath方法时，都会调用localStorage.setItem方法将activePath的值保存到localStorage中。

在store文件夹下的index.js文件中，将该插件添加到plugins数组中。

import Vue from 'vue'
import Vuex from 'vuex'
import nav from './nav'
import localStorage from './localStorage'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    nav
  },
  plugins: [
    localStorage
  ]
})

export default store

这样就可以通过localStorage来缓存导航栏选中状态了。

以上就是实现选中状态刷新不消失的完整攻略，当然，可以按照自己的需求进行调整。