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

在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内导航栏的两种实现方式的更多相关文章

  1. WPF内嵌网页的两种方式

    在wpf程序中,有时会内嵌网页.内嵌网页有两种方法,一种是使用wpf自带WebBrowser控件来调用IE内核,另一种是使用CefSharp包来调用chrom内核. 一.第一种使用自带WebBrows ...

  2. Android 常用UI控件之TabHost(1)TabHost的两种布局方式

    TabHost是Android中的tab组件. TabHost布局文件的基本结构 TabHost下有个layout,这个layout中有TabWidget与FrameLayout.TabWidget是 ...

  3. Android中BroadcastReceiver的两种注册方式(静态和动态)详解

    今天我们一起来探讨下安卓中BroadcastReceiver组件以及详细分析下它的两种注册方式. BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来 ...

  4. Android中Fragment与Activity之间的交互(两种实现方式)

    (未给Fragment的布局设置BackGound) 之前关于Android中Fragment的概念以及创建方式,我专门写了一篇博文<Android中Fragment的两种创建方式>,就如 ...

  5. 【Visual Lisp】两种出错处理方式

    两种出错处理方式:一种是对出错函数进行重定义,一种是对错误进行捕捉处理. ;;============================================================= ...

  6. Ajax中的get和post两种请求方式的异同

    Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.   1. get是把参数数据队列加到提交表单的A ...

  7. WDS 的两种实现方式

    转自:http://blog.chinaunix.net/uid-26527046-id-3627627.html WDS 的两种实现方式 WDS(Wireless Distribution Syst ...

  8. Ajax的get和post两种请求方式区别

    Ajax的get和post两种请求方式区别 (摘录):http://ip-10000.blog.sohu.com/114437748.html 解get和post的区别. 1. get是把参数数据队列 ...

  9. 软件公司的两种管理方式 总体来说,这个世界上存在两种不同的软件公司的组织结构。我把他们叫做 Widget Factory(小商品工厂) 和 Film Crews(电影工作组

    软件公司的两种管理方式 一个简单的回答应该是——“因为在我们的社会里,我们总是会认为薪水和会和职位的层次绑在一起”.但是,这个答案同时也折射出一个事实——我们的薪资是基于我们的所理解的价值,但这并没有 ...

随机推荐

  1. React hooks详解

    此篇文章仅是对hooks入门的总结,老鸟略过吧~ React从16.8.X以后增加了一个新特性,react hooks 让我们看看这个新特性又带来了哪些惊喜呢~以下内容我们采取不同方式创建组件来进行对 ...

  2. 深入理解计算机系统 (CS:APP) Lab2 - Bomb Lab 解析

    原文地址:https://billc.io/2019/04/csapp-bomblab/ 写在前面 CS:APP是这学期的一门硬核课程,应该是目前接触到最底层的课程了.学校的教学也是尝试着尽量和CMU ...

  3. [Visual Basic]冒泡排序及优化

    冒泡排序 注意点 越界问题:i的边界是n-1,也就是说是对总共的第1~n个数进行排列(最后一个数处于被比较状态,不需要额外主动比较):j的初始值或最终值与当前i的值 有关题目中往往会改变i的值来考察, ...

  4. C# UDP通讯实例

    1.发送方代码 void SendMsg(string toip, int port ) { try { string message="发送内容"; UdpClient udpc ...

  5. x86汇编指令集大全(带注释)

    X86和X87汇编指令大全(有注释) PUSH 压栈.POP 来说是出栈.入栈(push):---------- 一.数据传输指令 ---------------------------------- ...

  6. [kmp,不要过多调用strlen!!!] Codeforces 1200E Compress Words

    题目:http://codeforces.com/contest/1200/problem/E Compress Words time limit per test 1 second memory l ...

  7. 【笔记3-26】Python语言基础

    编译型语言和解释型语言 编译型语言 C 先编译 解释型语言 Python 边执行边编译 Python的介绍 吉多·范罗苏姆 1991 解释型语言 Life is short you need Pyth ...

  8. CF 631C report

    Each month Blake gets the report containing main economic indicators of the company "Blake Tech ...

  9. Jmeter接口测试之用户自定义变量(九)

    在使用Jmeter做接口自动化测试中,经常会使用到公共的数据,那么就需要对这些公共的数据分离出来,不管是基于测试框架的思想,还是使用工具来进行做自动化测试,公共数据的分离首先是需要思考的.这里就以获取 ...

  10. 非常诡异的IIS下由配置文件加上svg的mime头导致整个网站的静态文件访问报错误

    调试了两天遇到一个非常诡异的问题 一个系统稳定运行了很多年,是用mvc5+WIN2008R2  + .NET 4.5 +IIS环境下运行,非常稳定,最近想迁移到一台新的服务器,为了少麻烦在阿里云上买了 ...