详解Nuxt内导航栏的两种实现方式

方式一 | 通过嵌套路由实现

在pages页面根据nuxt的路由规则，建立页面

1. 创建文件目录及文件

方式二 | 创建公共组件实现

这个方法是需要用到vuex的，当然了，如果嫌麻烦，用storage也行

在components内创建公共组件

1.在pages文件夹创建页面，一个主页，一个用户页面，一个活动页面

这就是建立好的路由

2. 创建公共组件

问题出现了，虽然我们的路由变换了，但是导航栏的状态确没有同步，因为路由跳转的时候，组件状态会刷新，所以这个时候，需要共享状态，所以，我这里用的是vuex

4. 使用vuex同步导航栏状态

直接在store文件夹内进行添加就行，nuxt里推荐的两种vuex使用方法

第一种是普通创建

这里我选的是第二种方式，我也建议使用这种，因为方便维护，各种状态一目了然

我们看下目录结构，这里和在vue使用的vuex目录是一样的

我们继续回到导航栏组件内

<template>
 <div id="nav-wrapper">
  <el-menu :default-active="activeIndex" class="el-menu-demo" 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内导航栏内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！