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 学习之一 对象访问
Nov 23 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
详解vue 组件
Jun 11 Javascript
如何利用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小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
PHP实现计算器小功能
2020/08/28 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
德国网上宠物店:Zoobio
2018/05/23 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
物流创业计划书
2014/02/01 职场文书
主要负责人任命书
2014/06/06 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
2014年幼师工作总结
2014/11/22 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Go遍历struct,map,slice的实现
2021/06/13 Golang
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android