【vue3】固定上导航栏和左侧导航栏,只显示其他内容在主内容区域

实现思路:

  1. 在一个单独的vue组件文件中只写出上导航栏和左侧导航栏的内容
  2. 将你想要展示的页面主内容写到单独的组件中
  3. 在index.js写路由,将【想要展示的页面主内容的路由】作为【子路由】写在【只写出上导航栏和左侧导航栏的路由】的下面;

在elment-plus官网上找到自己需要的布局容器模型

Container 布局容器 | Element Plus (element-plus.org)https://element-plus.org/zh-CN/component/container.html#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80


重要代码

我的侧边栏是菜单,在菜单里面加上router属性,它的子菜单你点击它才能跳转到相应的路由去展示内容;


 注意一定要主内容区域的标签里加上黄色区域的代码,这样你的其他页面才能在主内容区域显示;

<el-main style="background: #f6f4f4"><router-view/>
</el-main>

【核心】index.js路由的书写

 /0路由里只写了上导航栏和左侧导航栏的框架(后面简称框架),主体区是没有内容的,我在/first路由下写了首页要展示的内容,所以当访问/0路由时,使用redirect将路由重定向到/firest路由,就可以既展示框架又展示主体内容,children:[ ]里面写了所有要在主体区域的页面路由;


效果图:

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/72398.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24. 两两交换链表中的节点

给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4] 输出&#xff1a;[2,1,4…

【山河送书第七期】:《强化学习:原理与Python实战》揭秘大模型核心技术RLHF!

《强化学习&#xff1a;原理与Python实战》揭秘大模型核心技术RLHF&#xff01; 一图书简介二RLHF是什么&#xff1f;三RLHF适用于哪些任务&#xff1f;四RLHF和其他构造奖励模型的方法相比有何优劣&#xff1f;五什么样的人类反馈才是好反馈&#xff1f;六如何减小人类反馈带来…

宏工科技十五周年,“归零心态”竞逐全球

长久以来&#xff0c;物料处理领域一直处于被大型跨国企业垄断&#xff0c;或是国内厂商野蛮生长的状态&#xff0c;宏工科技在15年发展中&#xff0c;通过培育自身的技术创新与自主研发能力&#xff0c;在物料处理领域突围&#xff0c;实现跨行业发展、规模化扩张和持续增长。…

【学习FreeRTOS】第10章——FreeRTOS时间片调度

1.时间片调度简介&#xff08;同第2章1.3&#xff09; 同等优先级任务轮流地享有相同的 CPU 时间(可设置)&#xff0c; 叫时间片&#xff0c;在FreeRTOS中&#xff0c;一个时间片就等于SysTick 中断周期 首先Task1运行完一个时间片后&#xff0c;切换至Task2运行Task2运行完…

数据库分片原则和算法

1. 数据分片概念 数据库分片是指将一个大型数据库拆分成多个小型数据库&#xff0c;每个小型数据库称为一个分片。通过这种方式&#xff0c;可以将数据库的负载分散到多个服务器上&#xff0c;从而提升性能瓶颈以及可用性。 数据分片的核心手段就是对关系型数据库进行分库和分表…

uniapp的逆地理编码 和地理编码

1.先打开高德地图api找到那个 地理编码 2.封装好我们的请求 3.逆地理编码 和地理编码 都是固定的 记住自己封装的请求 就可以了 这个 是固定的 方式 下面这个是固定的 可以复制过去 getlocation就是uniapp提供的 获取经纬度 然后 下面的 就是高德地图提供的 方法 要想使用我…

seaborn color palette 调色板颜色图

Here is a list of the Color Brewer palettes, with their names for easy reference: sns.lineplot(datanormal_df, palettesns.color_palette(paletteSet1, n_colors1))

ubuntu向日葵无法连接

近来收到部分用户小伙伴的反馈&#xff0c;在CentOS8、Ubuntu17.10或更高版本上使用向日葵个人版&#xff0c; 当其它设备远程控制自己的时候&#xff0c;控制界面会出现“连接已断开”或显示为黑屏的情况。 这其实是由于系统默认采用了wayland作为显示服务器的缘故&#xff0…

蔚来李斌卖手机:安卓系统,苹果售价,一年一发

‍作者 | Amy 编辑 | 德新 车圈大佬的玩法真让人寻不着套路&#xff01; 苹果的库克和小米的雷布斯&#xff0c;甚至是FF贾老板准备许久&#xff0c;都想分一块新能源车的蛋糕&#xff0c;蔚来李斌却反手进军手机界&#xff0c;从宣布造手机到手机入网仅仅隔了一年。 近期&a…

关于小程序收集用户手机号行为的规范

手机号在日常生活中被广泛使用&#xff0c;是重要的用户个人信息&#xff0c;小程序开发者应在用户明确同意的前提下&#xff0c;依法合规地处理用户的手机号信息。 而部分开发者在处理用户手机号过程中&#xff0c;存在不规范收集行为&#xff0c;影响了用户的正常使用体验&a…

Matlab中图例的位置(图例放在图的上方、下方、左方、右方、图外面)等

一、图例默认位置 默认的位置在NorthEast r 10; a 0; b 0; t0:0.1:2.1*pi; xar*cos(t); ybr*sin(t); A1plot(x,y,r,linewidth,4);%圆 hold on axis equal A2plot([0 0],[1 10],b,linewidth,4);%直线 legend([A1,A2],圆形,line)二、通过Location对legend的位置进行改变 变…

Android Selector 的使用

什么是 Selector&#xff1f; Selector 和 Shape 相似&#xff0c;是Drawable资源的一种&#xff0c;可以根据不同的状态&#xff0c;设置不同的图片效果&#xff0c;关键节点 < selector > &#xff0c;例如&#xff1a;我们只需要将Button的 background 属性设置为该dr…