<template> <div> <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"> <el-menu-item index="1" @click="$router.push({name: 'index'})">首页</el-menu-item> <el-menu-item index="3" @click="$router.push({name: 'users'})">用户页面</el-menu-item> <el-menu-item index="4" @click="$router.push({name: 'active'})">活动页面</el-menu-item> </el-menu> </div> </template> <script> import {mapGetters, mapMutations} from 'vuex' export default{ data() { return { activeIndex: '1', activeIndex2: '1' }; }, computed: { ...mapGetters([ 'barIndex' ]) }, methods: { ...mapMutations({ 'change_index': 'CHANGE_INDEX' }), handleSelect(key, keyPath) { console.log(key, keyPath); this.activeIndex = key // 每次切换导航栏，会把当前状态同步到vuex中 this.change_index(this.activeIndex) } }, created() { if (this.barIndex) { // 判断vuex内是否有上一次存储的数据，有就同步到当前状态 this.activeIndex = this.barIndex } console.log('vuex', this.activeIndex) } } </script>
这样，我们就已经可以同步导航栏状态了
到此这篇关于详解Nuxt内导航栏的两种实现方式的文章就介绍到这了,更多相关Nuxt内导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: