Nuxt内导航栏的两种实现方式
方式一 | 通过嵌套路由实现
在pages页面根据nuxt的路由规则,建立页面
1. 创建文件目录及文件
根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同
所以,我们的文件夹也为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改了一下,可以看到,切换路由的时候,只有子路由页面是变换的,父路由部分是没有变换的
方式二 | 创建公共组件实现
这个方法是需要用到vuex的,当然了,如果嫌麻烦,用storage也行
在components内创建公共组件
1.在pages文件夹创建页面,一个主页,一个用户页面,一个活动页面
创建页面的过程就不一一细说了,具体就是文件夹下面一个index.vue,router就会读这个index为路由指定的页面
我们看下.nuxt文件夹下面的router.js页面
这就是建立好的路由
2. 创建公共组件
这里偷个懒,用的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>
这样就完成了第一步,我们看下预览
问题出现了,虽然我们的路由变换了,但是导航栏的状态确没有同步,因为路由跳转的时候,组件状态会刷新,所以这个时候,需要共享状态,所以,我这里用的是vuex
4. 使用vuex同步导航栏状态
直接在store文件夹内进行添加就行,nuxt里推荐的两种vuex使用方法
第一种是普通创建
第二种是模块化创建
这里我选的是第二种方式,我也建议使用这种,因为方便维护,各种状态一目了然
我们看下目录结构,这里和在vue使用的vuex目录是一样的
这里就不一一详细说明每个文件内容了,本次重点是使用vuex来同步状态
我们把状态同步到vuex中,这样每次页面进来的时候,直接读取vuex中的数据,就可以同步导航栏状态栏了
4.1 vuex使用报错
store/index.js should export a method that returns a Vuex
instance.vuex在nuxt中是需要导出一个store实例
我们这里需要改动一下store文件下的index页面
我们继续回到导航栏组件内
<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内导航栏的两种实现方式的更多相关文章
- WPF内嵌网页的两种方式
在wpf程序中,有时会内嵌网页.内嵌网页有两种方法,一种是使用wpf自带WebBrowser控件来调用IE内核,另一种是使用CefSharp包来调用chrom内核. 一.第一种使用自带WebBrows ...
- Android 常用UI控件之TabHost(1)TabHost的两种布局方式
TabHost是Android中的tab组件. TabHost布局文件的基本结构 TabHost下有个layout,这个layout中有TabWidget与FrameLayout.TabWidget是 ...
- Android中BroadcastReceiver的两种注册方式(静态和动态)详解
今天我们一起来探讨下安卓中BroadcastReceiver组件以及详细分析下它的两种注册方式. BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来 ...
- Android中Fragment与Activity之间的交互(两种实现方式)
(未给Fragment的布局设置BackGound) 之前关于Android中Fragment的概念以及创建方式,我专门写了一篇博文<Android中Fragment的两种创建方式>,就如 ...
- 【Visual Lisp】两种出错处理方式
两种出错处理方式:一种是对出错函数进行重定义,一种是对错误进行捕捉处理. ;;============================================================= ...
- Ajax中的get和post两种请求方式的异同
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别. 1. get是把参数数据队列加到提交表单的A ...
- WDS 的两种实现方式
转自:http://blog.chinaunix.net/uid-26527046-id-3627627.html WDS 的两种实现方式 WDS(Wireless Distribution Syst ...
- Ajax的get和post两种请求方式区别
Ajax的get和post两种请求方式区别 (摘录):http://ip-10000.blog.sohu.com/114437748.html 解get和post的区别. 1. get是把参数数据队列 ...
- 软件公司的两种管理方式 总体来说,这个世界上存在两种不同的软件公司的组织结构。我把他们叫做 Widget Factory(小商品工厂) 和 Film Crews(电影工作组
软件公司的两种管理方式 一个简单的回答应该是——“因为在我们的社会里,我们总是会认为薪水和会和职位的层次绑在一起”.但是,这个答案同时也折射出一个事实——我们的薪资是基于我们的所理解的价值,但这并没有 ...
随机推荐
- React hooks详解
此篇文章仅是对hooks入门的总结,老鸟略过吧~ React从16.8.X以后增加了一个新特性,react hooks 让我们看看这个新特性又带来了哪些惊喜呢~以下内容我们采取不同方式创建组件来进行对 ...
- 深入理解计算机系统 (CS:APP) Lab2 - Bomb Lab 解析
原文地址:https://billc.io/2019/04/csapp-bomblab/ 写在前面 CS:APP是这学期的一门硬核课程,应该是目前接触到最底层的课程了.学校的教学也是尝试着尽量和CMU ...
- [Visual Basic]冒泡排序及优化
冒泡排序 注意点 越界问题:i的边界是n-1,也就是说是对总共的第1~n个数进行排列(最后一个数处于被比较状态,不需要额外主动比较):j的初始值或最终值与当前i的值 有关题目中往往会改变i的值来考察, ...
- C# UDP通讯实例
1.发送方代码 void SendMsg(string toip, int port ) { try { string message="发送内容"; UdpClient udpc ...
- x86汇编指令集大全(带注释)
X86和X87汇编指令大全(有注释) PUSH 压栈.POP 来说是出栈.入栈(push):---------- 一.数据传输指令 ---------------------------------- ...
- [kmp,不要过多调用strlen!!!] Codeforces 1200E Compress Words
题目:http://codeforces.com/contest/1200/problem/E Compress Words time limit per test 1 second memory l ...
- 【笔记3-26】Python语言基础
编译型语言和解释型语言 编译型语言 C 先编译 解释型语言 Python 边执行边编译 Python的介绍 吉多·范罗苏姆 1991 解释型语言 Life is short you need Pyth ...
- CF 631C report
Each month Blake gets the report containing main economic indicators of the company "Blake Tech ...
- Jmeter接口测试之用户自定义变量(九)
在使用Jmeter做接口自动化测试中,经常会使用到公共的数据,那么就需要对这些公共的数据分离出来,不管是基于测试框架的思想,还是使用工具来进行做自动化测试,公共数据的分离首先是需要思考的.这里就以获取 ...
- 非常诡异的IIS下由配置文件加上svg的mime头导致整个网站的静态文件访问报错误
调试了两天遇到一个非常诡异的问题 一个系统稳定运行了很多年,是用mvc5+WIN2008R2 + .NET 4.5 +IIS环境下运行,非常稳定,最近想迁移到一台新的服务器,为了少麻烦在阿里云上买了 ...