如何实现嵌套路由

简介: 如何实现嵌套路由

实现步骤

1. 新建子页面

2. 在router/index.js中的父路由节点添加children数组

3. 在children中添加子路由

{
    path: '/',
    name: 'home',
    component: HomeView,
    children: [
{
            path: '/pageA',
            name: 'pageA',
            component: pageA
       },
       {
            path: '/pageB',
            name: 'pageB',
            component: pageB
       }
   ]
},

5.在父路由页面添加 路由出口

<template>
    <div>
        <RouterLink to="/pageA">A页面</RouterLink>|
        <RouterLink to="/pageB">B页面</RouterLink>
        <div style="border: 1px #000 solid;">子页面将输出到这里:
            <RouterView />
        </div>
    </div>
</template>


相关文章
|
JavaScript
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
1009 0
|
7月前
|
缓存
flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
基于最新跨平台框架flutter3.x+dart3+getx+flutter_datepicker纯手写实战的一款仿去哪儿/携程旅游酒店预约客房app系统。
210 6
|
11月前
|
存储
人工光合作用:可持续能源的替代方案
【10月更文挑战第4天】在能源紧缺与环境污染日益严重的背景下,人工光合作用作为模拟自然光合作用的技术,展示了其在可持续能源领域的巨大潜力。本文详细介绍了其基本原理,即通过人工装置将太阳能、水和二氧化碳转化为清洁燃料;技术进展包括光催化剂优化、集成反应系统及多样化产物;以及其在清洁能源生产、碳减排和环境治理中的应用。随着研究的深入,人工光合作用有望成为未来能源转型的关键技术。
|
JSON 关系型数据库 数据库
PostgreSQL中json_to_record函数的神秘面纱
`json_to_record`是PostgreSQL中的函数,用于将JSON数据转换为RECORD类型,便于查询和分析。基本用法是传入JSON数据,如`SELECT json_to_record(&#39;{&quot;name&quot;: &quot;张三&quot;, &quot;age&quot;: 30}&#39;::json);`。还可结合FUNCTION创建自定义函数,实现复杂功能。在实际应用中,它简化了对JSON格式数据的处理,例如筛选年龄大于30的用户。了解并善用此函数能提升数据库操作效率。本文由木头左分享,期待你的点赞和收藏,下次见!
PostgreSQL中json_to_record函数的神秘面纱
|
机器学习/深度学习 数据采集 算法
【2021 数学建模“华为杯”】B题:空气质量预报二次建模 2 方案设计附实现代码
2021年数学建模“华为杯”B题的方案设计和实现代码,包括数据预处理、特征选择、聚类算法、气象特征分析以及使用LSTM神经网络进行多变量时间序列预测以实现空气质量预报。
324 0
Go - 如何编写 ProtoBuf 插件(二)?
Go - 如何编写 ProtoBuf 插件(二)?
147 0
|
SQL
SQL中GROUP BY语句与HAVING语句的使用
SQL中GROUP BY语句与HAVING语句的使用
461 1
|
数据可视化 物联网 测试技术
零一万物Yi-1.5系列模型发布并开源!34B/9B/6B 多尺寸魔搭社区推理微调最佳实践教程来啦!
Yi-1.5是Yi的升级版本。 它使用 500B tokens的高质量语料库在 Yi 上持续进行预训练,并在 3M 个多样化的微调样本上进行微调。
|
存储 资源调度 前端开发
【React | 完整项目创建流程】能看到这么详细的React配置流程,就偷着乐吧!
【React | 完整项目创建流程】能看到这么详细的React配置流程,就偷着乐吧!
363 1
|
文字识别 算法 计算机视觉
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV图像处理
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV图像处理
387 1