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 自动填写表单的实现方法
Apr 09 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
js实现div弹出层的方法
Nov 20 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
动态加载js文件简单示例
Apr 21 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 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
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
angularjs $http调用接口的方式详解
2018/08/13 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python实现自动解数独小程序
2019/01/21 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
pygame实现打字游戏
2021/02/19 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
python numpy库np.percentile用法说明
2020/06/08 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python