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 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
javascript常用的方法分享
Jul 01 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
JavaScript中的Proxy对象
Nov 27 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 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python制作爬虫抓取美女图
2016/01/20 Python
python中 logging的使用详解
2017/10/25 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python如何实现爬取B站视频
2020/05/20 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
政治表现评语
2014/05/04 职场文书
党日活动总结
2014/05/07 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
工作检讨书范文
2015/01/23 职场文书
2016新年问候语大全
2015/11/11 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS