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

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

看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在<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二级路由

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

先看我的目录

如果没有登陆页，根本就不用考虑嵌套路由的问题，主要的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组件用法(父子页面组件的传值)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • nuxt 服务器渲染动态设置 title和seo关键字的操作

    使用如下钩子即可,但是前提条件是 没有默认配置head的title asyncData ({ app }, callback) { app.head.title = 'new title' callback(null, {}) }, 补充知识:vue 每个页面动态切换title keywords description (seo的设置) 最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description !!!在这里先添加一步: html文件添加 <meta

  • nuxt 实现在其它js文件中使用store的方式

    前言 在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面. 我们都知道如何在vue中如何使用. 代码 /* * @Description: * @Author: lxc * @Date: 2019-07-02 16:14:07 * @LastEditTime: 2019-08-14 16:08:19 * @LastEditors: lxc */ // 导出 store 的地方 imp

  • Nuxt pages下不同的页面对应layout下的页面布局操作

    有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用. pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称 请确保在布局文件里面增加 <nuxt/> 组件用于显示页面非布局内容. 举个例子 1.layouts/custom_layout.vue: <template> <div> <div class

  • nuxt.js写项目时增加错误提示页面操作

    为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验. 实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户: nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法 此项目中的错误提示页面是放在layouts目录中: layouts中的error.vue页面内容为: <template>

  • nuxt引入组件和公共样式的操作

    1,引入组件 在components目录创建组件,在页面中引入组件 例如引入公共导航栏 创建组件components/Nav.vue 引入组件layouts/default.vue 2,引入公共样式 assets/css/common.css 在nuxt.config.js中引入 若引入less或者sass: 补充知识:在nuxt项目中使用component组件 编写组件页面 1.在components下新建一个新建组件页面,如下所示 2.新建完成之后初始页面的代码如下所示: 3.下面从elem

  • nuxt 页面路由配置,主页轮播组件开发操作

    在上一个章节内容中,我们开发了AppHeader公共顶部菜单导航栏组件,本章节呢,我们根据菜单导航的路由导航,来配置我们的 page页面, 去到pages目录,我们需要创建3个[nuxt_link_name].vue页面文件,用来匹配路由导航需要加载的页面: 好,我们进入命令行,来创建页面文件, 1.windows 系统下可以使用如下命令: for /r %v in ( index.vue , jokes.vue, about.vue ) do type null > %v 2.linux/ma

  • nuxt 每个页面head标签内容设置方式

    导读 在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签 内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致: 所以我们需要对这三个页面单独做一个head,更加方便于SEO优化,搜索引擎的爬取: 好,我们打开index.vue,编辑如下: head(){ return { title: 'jokes home page', meta: [{ hid: "description

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

    Nuxt嵌套路由官网上的API详解:点击链接 看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容,要想默认的在<nuxt-child>区域显示一个页面内容怎么办? 自己案例代码: pages/parent.vue <template> <div> <h2>父组件的页面的内容</h2> <ul> <!-- 进行切换子页面,写法同vue.js --> <li><nuxt-link t

  • vue router学习之动态路由和嵌套路由详解

    vue router学习之动态路由和嵌套路由详解

    本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行.如果还么有搭建可以参考文章: http://www.jb51.net/article/111650.htm 好,下面上货. 首先介绍一下动态路由. 动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中: <template> <div id="app">

  • Vue 嵌套路由使用总结（推荐）

    开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 需求场景 如下图,我们希望点击导航栏不同菜单时,导航栏下方加载不同的组件,进而展示不同的页面内容 解决方案 使用动态路由 新建home.vue作为子页面组件 <template> <div> <h3>home Page</h3> <p>home page content</p> </div> <

  • Nuxt的路由配置和参数传递方式

    学习前端框架都要学习路由机制,因为路由可以体现我们的业务逻辑,把模块串联起来,让程序换发光彩. 那简单的说路由就是我们的跳转机制,也可以简单理解成链接跳转. Nuxt.js的路由并不复杂,它给我们进行了封装,让我们节省了很多配置环节. 简单路由Demo 我们现在在根目录的pages文件下新建两个文件夹,about和news(模仿关于我们和新闻的功能模块) 在about文件夹下新建index.vue文件,代码如下: <template> <div> <h2>About I

  • Nuxt的路由动画效果案例

    路由的动画效果,也叫作页面的更换效果.Nuxt.js提动两种方法为路由提动动画效果,一种是全局的,一种是针对单独页面制作. 全局路由动画 全局动画默认使用page进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果.我们可以先在根目录的assets/css下建立一个main.css文件. /assets/css/main.css .page-enter-active,.page-leave-active{ transition: opacity 2s; } .page-ente

  • Vue Router嵌套路由(children)的用法小结

    Vue Router嵌套路由(children)的用法小结

    目录 简介 使用场景 官网网址 示例 路由配置 用户页面(父页面) 子路由的path前加“/” 简介 说明 本文介绍Vue Router的嵌套路由的用法. 嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由导航和路由容器(router-link.router-view),通过配置children可实现多层嵌套.(router-view必须要有,否则点击了router-link后,路径会变化,但页面不改变). 使用场景 嵌套路由用于实现页中页效果.例如: 用户页面中,有登录页面和注册页面,这

  • vue-router之nuxt动态路由设置的两种方法小结

    方法一:router-link <div class="slide-item" v-for="user in shareData.users"> <nuxt-link :to="'/community/member/'+ user.id"> <img src="../../static/head.png" alt=""> <p>{{user.nickname}

  • vue中keep-alive组件实现多级嵌套路由的缓存

    目录 现状(问题): 探索方案: 实现方式 现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la

  • VueJs组件之父子通讯的方式

    组件(父子通讯) 一.概括 在一个组件内定义另一个组件,称之为父子组件. 但是要注意的是:1.子组件只能在父组件内部使用(写在父组件tempalte中); 2.默认情况下,子组件无法访问父组件上的数据,每个组件实例的作用域是独立的: 那如何完成父子如何完成通讯,简单一句话:props down, events up :父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送 父传子:Props 子传父:子:$emit(eventName) 父$on(eventName

  • Vue学习之组件用法实例详解

    Vue学习之组件用法实例详解

    本文实例讲述了Vue学习之组件用法.分享给大家供大家参考,具体如下: Vue中的模块化.可重用代码块将页面细分为一个个功能组件,而且组件之间可以嵌套.组件分为全局组件与局部组件,局部组件在实例中进行注册,并且只可以应用于该实例中. 1. 组件的使用流程: //1.创建组件构造器 let overallDiv=Vue.extend({ template:` <div> <p>这是一个全局组件div</p> </div> ` }); //2.注册全局组件 Vue

随机推荐