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

在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. DVWA(七):XSS(stored)存储型XSS攻击

    存储型XSS : 存储XSS,会把攻击者的数据存储在服务器端,攻击行为将伴随着攻击数据一直存在.提交JS攻击代码存储到数据库然后再输出. low: 观察源码: <?php if( isset( ...

  2. .NET Core技术研究-HttpContext访问的正确姿势

    将ASP.NET升级到ASP.NET Core之后,相信大家都会遇到HttpContext.Current无法使用的问题.这也是我们迁移ASP.NET Core必须解决的问题. 本文我们详细讨论一下, ...

  3. 使用new Image()可以针对单单请求,不要返回数据的情况

    使用new Image()可以针对单单请求,不要返回数据的情况,比如我这里写了一个Demo,请求百度的Logo一个示例: <html> <head> </head> ...

  4. POJ3352 Road Construction Tarjan+边双连通

    题目链接:http://poj.org/problem?id=3352 题目要求求出无向图中最少需要多少边能够使得该图边双连通. 在图G中,如果任意两个点之间有两条边不重复的路径,称为“边双连通”,去 ...

  5. spring 请求静态资源文件

    在springMVC项目中使用restful风格写,需要到web.xml配置全拦截. <servlet>        <servlet-name>springmvc</ ...

  6. 关于js中iframe 中 location.href的用法

    关于js中"window.location.href"."location.href"."parent.location.href".&qu ...

  7. 字节转换函数 htonl*的由来与函数定义...

    字节转换字符由来: 在网络上面有着许多类型的机器,这些机器在表示数据的字节顺序是不同的, 比如i386芯片是低字节在内存地址的低端, intel处理器将32位的整数分4个连续的字节,并以字节序1-2- ...

  8. DrQA 阅读维基百科来回答开放问题 Reading Wikipedia to Answer Open-Domain Questions

    DrQA 是一个阅读理解系统用在开放领域问答.特别的,DrQA 针对一个机器阅读任务.在这个列表里,我们为一个潜在非常大的预料库中搜索一个问题的答案.所以,这个系统必须结合文本检索和机器文本理解. 项 ...

  9. TensorFlow系列专题(九):常用RNN网络结构及依赖优化问题

    欢迎大家关注我们的网站和系列教程:http://panchuang.net/ ,学习更多的机器学习.深度学习的知识! 目录: 常用的循环神经网络结构 多层循环神经网络 双向循环神经网络 递归神经网络 ...

  10. 给 EF Core 查询增加 With NoLock

    给 EF Core 查询增加 With NoLock Intro EF Core 在 3.x 版本中增加了 Interceptor,使得我们可以在发生低级别数据库操作时作为 EF Core 正常运行的 ...