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


Posted in Javascript onApril 16, 2020

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

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

1. 创建文件目录及文件

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

根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同

所以,我们的文件夹也为index,index文件夹需要一个默认的页面不然nuxt的路由规则就不能正确匹配页面

一级路由是根路由

二级路由是index,user,默认进入index路由

下面是router页面自动生成的路由

{
  path: "/",
  component: _93624e48,
  children: [{
   path: "",
   component: _7ba30c26,
   name: "index"
  }, {
   path: "user",
   component: _6934afa7,
   name: "index-user"
  }]
 }

2. html页面增加nutx-child配合子路由跳转

<template>
 <div class="container">
  <div>
   <logo />
   <h1 class="title">
    nuxt-demo
   </h1>
   // 直接访问路由
   <!-- <nuxt-link to="/users">用户列表</nuxt-link> -->
   // 通过push的方式直接访问路由路径
   <!-- <el-button @click="$router.push('/users')">用户列表</el-button> -->
   // 通过push的方式,同时用对象的方式访问路由
   <el-button @click="$router.push({name: 'index'})">首页</el-button>
   <el-button @click="$router.push({name: 'index-user'})">用户详情</el-button>
  </div>
  // nuxt规定的子路由插槽
  <nuxt-child></nuxt-child>
 </div>
</template>

这里就拿官方demo改了一下,可以看到,切换路由的时候,只有子路由页面是变换的,父路由部分是没有变换的

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

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

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

在components内创建公共组件

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

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

创建页面的过程就不一一细说了,具体就是文件夹下面一个index.vue,router就会读这个index为路由指定的页面

我们看下.nuxt文件夹下面的router.js页面

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

这就是建立好的路由

2. 创建公共组件

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

这里偷个懒,用的element的导航栏组件

<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>

3. 在所有路由页面导入创建的公共组件

<template>
 <div class="container">
  <div>
   <logo />
   <h1 class="title">
    nuxt-demo
   </h1>
   <navBar />
  </div>
 </div>
</template>

<script>
import Logo from '~/components/Logo.vue'
import navBar from '~/components/nav.vue'

export default {
 components: {
  Logo,
  navBar
 }
}
</script>

<style>

这样就完成了第一步,我们看下预览

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

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

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

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

第一种是普通创建

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

第二种是模块化创建

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

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

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

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

这里就不一一详细说明每个文件内容了,本次重点是使用vuex来同步状态

我们把状态同步到vuex中,这样每次页面进来的时候,直接读取vuex中的数据,就可以同步导航栏状态栏了

4.1 vuex使用报错

store/index.js should export a method that returns a Vuex

instance.vuex在nuxt中是需要导出一个store实例

我们这里需要改动一下store文件下的index页面

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

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

<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内导航栏的两种实现方式的文章就介绍到这了,更多相关Nuxt内导航栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 #Javascript
vue下canvas裁剪图片实例讲解
Apr 16 #Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 #Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 #Javascript
Vue Object 的变化侦测实现代码
Apr 15 #Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 #Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 #Javascript
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
Vue之mixin全局的用法详解
2018/08/22 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
优秀企业获奖感言
2014/02/01 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
优质服务口号
2014/06/11 职场文书
导师对论文的学术评语
2015/01/04 职场文书
提档介绍信范文
2015/10/22 职场文书
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript