Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)


Posted in Javascript onNovember 05, 2020

Nuxt嵌套路由官网上的API详解:点击链接

看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容,要想默认的在<nuxt-child>区域显示一个页面内容怎么办?

Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

自己案例代码:

pages/parent.vue

<template>
 <div>
 <h2>父组件的页面的内容</h2>
 <ul>
 <!-- 进行切换子页面,写法同vue.js -->
 <li><nuxt-link to='/parent/child'>child</nuxt-link></li>
 <li><nuxt-link to='/parent/child2'>child2</nuxt-link></li>
 </ul>
 <hr>
 <div class="box">
 <p>嵌套子页面内容区</p>
 <!-- <nuxt-child>标签在父页面组件中相当于是子页面组件的占位符;嵌套中这个不可少 -->
 <nuxt-child keep-alive :foobar="123"></nuxt-child>
 </div>
 </div>
</template>
<script>
export default {
 
}
</script>
<style scoped>
.box{
 margin-top: 20px;
 padding: 20px;
 border: 2px solid pink;
 border-radius: 5px;
}
</style>

pages/parent/index.vue

<template>
 <div>
 <h2>嵌套子组件中的默认页面index.vue</h2>
 </div>
</template>
<script>
export default {
 
}
</script>
<style scoped>
 
</style>

pages/parent/child.vue

<template>
 <div>
 <h2>嵌套子组件中的页面child</h2>
 <p>foobar:{{foobar}}</p>
 </div>
</template>
<script>
export default {
 props:['foobar']
}
</script>
<style scoped>
 
</style>

pages/parent/child2.vue

<template>
 <div>
 <h2>嵌套子组件中的页面child2</h2>
 <p>foobar:{{foobar}}</p>
 </div>
</template>
<script>
export default {
 props: ['foobar']
}
</script>
<style scoped>
 
</style>

效果如下:

Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

补充知识:nuxt二级路由

耗费了大半天的时间,终于把页面的二级路由配置好了

先看我的目录

Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

如果没有登陆页,根本就不用考虑嵌套路由的问题,主要的menu跳转和<nuxt />可以直接写到layouts/default.vue中,首页可以放到pages/index.vue,就可以了。

好了,步入核心的

情景,在中间件middleware/authenticated.js

// 定义了一个中间件, 如果用户未登录, 则跳转登录页。
export default function ({
 store,
 redirect
}) {
 if (!store.state.user) {
 return redirect('/login')
 }
}

首先,需要知道,pages/index.vue这个文件必须有,这是给路由'/',定义的页面,但是我真正的首页是在user/index.vue

pages/index.vue下

<template>
 <div style="height:100%;">

 </div>
</template>

<script>
export default {
 created () {
 console.log(this.$router)
 this.$router.push('/login') // 页面加载时跳转
 }
}
</script>

意思是加载二级路由的pages/users.vue页面

<template>
 <div style="height:100%;">
 <el-container style="height:100%">
 <el-header class="theme-bg-color">
 <my-head />
 </el-header>
 <el-container style="height:100%;">
 <my-side />
 <el-main>
 <NuxtChild :key="key"/>
 </el-main>
 </el-container>
 </el-container>
 </div>
</template>
<script>
import MySide from '~/components/MySide.vue'
import MyHead from '~/components/MyHead.vue'
export default {
 components: {
 MySide,
 MyHead
 },
 computed: {
 key() {
 return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
 }
 }
}
</script>

注意,在pages/users/index.vue页面中

export default {
 name: 'users'
}

其他页面,比如pages/users/ditch.vue页面中

export default {
 name: 'users-ditch'
}

一定要这样去写name,官网上也是这样说明的。

总结,嵌套路由(二级路由写法)

一,页面有个user.vue,文件夹也要有个同名的user;

二,最好有index.vue页面;

三,name格式。

源码地址:

https://github.com/besswang/rj-payadmin-nuxt

以上这篇Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
React中的refs的使用教程
Feb 13 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
如何利用vue实现波谱拟合详解
Nov 05 #Javascript
关于Vue中$refs的探索浅析
Nov 05 #Javascript
JavaScript 实现轮播图特效的示例
Nov 05 #Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 #Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 #Javascript
JavaScript TAB栏切换效果的示例
Nov 05 #Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 #Javascript
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
js实现选项卡效果
2020/03/07 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python中if及if-else如何使用
2020/06/02 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
C语言50道问题
2014/10/23 面试题
请说出以下代码输出什么
2013/08/30 面试题
汽车技术服务英文求职信范文
2014/01/02 职场文书
施工协议书范本
2014/04/22 职场文书