详解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 相关文章推荐
javascript椭圆旋转相册实现代码
Jan 16 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
vue组件间通信解析
Mar 01 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 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
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python使用matplotlib绘制折线图教程
2017/02/08 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
PyQt5每天必学之布局管理
2018/04/19 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
对Python3 序列解包详解
2019/02/16 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
自我评价是什么
2014/01/04 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
雷锋电影观后感
2015/06/10 职场文书