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

news2024/11/26 9:32:09

实现思路:

  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.coloradmin.cn/o/881396.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一百五十二、Kettle——Kettle9.3.0本地连接Hive3.1.2(踩坑,亲测有效,附截图)

一、目的 由于先前使用的kettle8.2版本在Linux上安装后&#xff0c;创建共享资源库点击connect时页面为空&#xff0c;后来采用如下方法&#xff0c;在/opt/install/data-integration/ui/menubar.xul文件里添加如下代码 <menuitem id"file-openZiyuanku" label&…

七夕特辑:所以结婚到底有什么好处?

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 伊姐 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦Midjourney 产品统筹 / bobo 场地支持 / 声湃轩天津录音间 七夕来临&#xff0c;“记者下班”第一次和大家聊聊亲密关系。 无论是青梅竹马、相识二十年的阿福&#…

私有IP地址有多重要?

私有IP地址是指在局域网中使用的IP地址&#xff0c;而不是公共互联网上可访问的IP地址。私有IP地址不唯一&#xff0c;可以在不同的局域网中重复使用。这种地址分配方式能够有效地节省IP地址资源。 近日&#xff0c;国际互联网协会&#xff08;IATA&#xff09;发布了一项关于私…

twinmotion和lumion相比选哪个更好?

建筑和室内可视化软件彻底改变了设计行业。随着实时渲染技术的引入&#xff0c;建筑师和设计师现在可以在几分钟内创建其设计的逼真渲染。Twinmotion 和 Lumion 是近年来流行的两个这样的程序。在本文中&#xff0c;我们将比较这两种引擎 - 它们有何不同&#xff0c;以及针对特…

恒运资本:CPO概念发力走高,兆龙互联涨超10%,华是科技再创新高

CPO概念15日盘中发力走高&#xff0c;截至发稿&#xff0c;华是科技涨超15%再创新高&#xff0c;兆龙互联涨逾11%&#xff0c;中贝通讯涨停&#xff0c;永鼎股份、太辰光涨超5%&#xff0c;天孚通讯涨逾4%。 消息面上&#xff0c;光通讯闻名咨询机构LightCounting近日发布的202…

【从零学习python 】30.深入理解递归函数和匿名函数

文章目录 递归函数1. 什么是递归函数2. 递归函数的作用解决办法1: 使用循环来完成解决办法2: 使用递归来实现 匿名函数应用场合函数作为参数传递练习进阶案例 递归函数 1. 什么是递归函数 通过前面的学习知道一个函数可以调用其他函数。 如果一个函数在内部不调用其它的函数…

高效的Python隧道代理配置与管理

作为一名专业爬虫程序员&#xff0c;我们需要掌握高效的Python隧道代理配置与管理&#xff0c;以提高爬取数据的效率并保护个人隐私安全。本文将分享从入门到精通的Python隧道代理配置与管理技巧&#xff0c;为大家提供实用的操作指南和专业的知识分享。让我们一起步入高效的Py…

垒球发展史·棒球1号位

垒球发展史 1. 垒球起源与初始阶段 垒球运动的起源 垒球运动&#xff0c;诞生于十九世纪末&#xff0c;起初只是为了娱乐消遣而逐渐发展成一项竞技运动。在十九世纪晚期&#xff0c;美国开始流行一种叫做“篮球弹”的游戏&#xff0c;它的游戏规则与现在的垒球十分相似&#…

集水井、PE集水井、雨水渗透井、环保渗透井、渗透式雨水口

城市道路与开放空间形成的雨水表面径流&#xff0c;是许多城市化地区面源水污染的重要来源。水流流过的不透水表面&#xff0c;会将道路、停车场、草坪等表面的垃圾、油污、重金属、化肥、农药等污染物带入水体。如直接排放&#xff0c;容易造成河流、溪水污染&#xff0c;最终…

【Vue-Router】历史记录

replace App.vue <template><h1>hello world</h1><div><!-- replace 不保存历史记录 --><router-link replace to"/">login</router-link><router-link replace style"margin-left: 10px;" to"/reg&q…

响应式设计是什么?怎么学习? - 易智编译EaseEditing

响应式设计是一种用于创建能够适应不同设备和屏幕尺寸的网站和应用程序的设计方法。它的目标是确保网站在各种设备上都能提供良好的用户体验&#xff0c;无论是在大屏幕的桌面电脑上还是在小屏幕的移动设备上。 在响应式设计中&#xff0c;页面的布局、字体、图像和其他元素会…

什么是API——理解应用程序接口的概念、类型和应用

I. 什么是API API&#xff08;Application Programming Interface&#xff0c;应用程序接口&#xff09;是指两个不同软件应用之间进行交互的一组方法。它是现代软件开发中不可或缺的一部分&#xff0c;让不同的应用程序能够相互通信、共享数据&#xff0c;并且以一种有序的方式…

代码随想录算法训练营(二叉树总结篇)

一.二叉树的种类 1.满二叉树&#xff1a;就是说每一个非叶子节点的节点都有两个子节点。 2.完全二叉树&#xff1a;此二叉树只有最后一层可能没填满&#xff0c;并且存在的叶子节点都集中在左侧&#xff01;&#xff01;&#xff01; &#xff08;满二叉树也是完全二叉树&…

css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现

实现效果&#xff1a; html代码&#xff1a; <div class"sidenav"><ul class"nav-text progressbar"><!-- data-target的值对应要跳转的模块的id --><li data-target"module1"><div class"text">锚点…

浅谈限流式保护器在住宅电气防火的应用

安科瑞 华楠 【摘要】随着人民生活水平的提高&#xff0c;家用大功率电器普遍被使用&#xff0c;导致用电量剧增&#xff0c;电气火灾频发。文章分析了电气火灾发生的原因&#xff0c;并时电气火灾的防范措施进行了探讨。 【关键词】电气火灾&#xff1b;原因&#xff1b;防范…

2023年7月京东美妆护肤品小样行业数据分析(京东数据挖掘)

如今&#xff0c;消费者更加谨慎&#xff0c;消费决策也更加理性。在这一消费环境下&#xff0c;美妆护肤市场中&#xff0c;面对动辄几百上千的化妆品&#xff0c;小样或体验装无疑能够降低消费者的试错成本。由此&#xff0c;这门生意也一直备受关注。 并且&#xff0c;小样…

SCF金融公链新加坡启动会 链结创新驱动未来

新加坡迎来一场引人瞩目的金融科技盛会&#xff0c;SCF金融公链启动会于2023年8月13日盛大举行。这一受瞩目的活动将为金融科技领域注入新的活力&#xff0c;并为广大投资者、合作伙伴以及关注区块链发展的人士提供一个难得的交流平台。 在SCF金融公链启动会上&#xff0c; Wil…

seq2seq

每一时刻使用了相同的编码向量 不同时刻使用不同的编码向量&#xff0c;&#xff0c;编码时刻的输出不同权重注意力机制 加权平均值 解码器隐藏层的状态值*编码器的输出的出值 在进行归一化得到每一时刻不同的权重值 再乘以编码器的输出得到一个语义编码向量 训练的时候当前时…

实战:工作中对并发问题的处理 | 京东物流技术团队

1. 问题背景 问题发生在快递分拣的流程中&#xff0c;我尽可能将业务背景简化&#xff0c;让大家只关注并发问题本身。 分拣业务针对每个快递包裹都会生成一个任务&#xff0c;我们称它为 task。task 中有两个字段需要关注&#xff0c;一个是分拣中发生的异常&#xff08;exp…

cloud_mall-notes01

1、登录 1.1 获取token令牌 登录时的ajax请求&#xff1a; 后端路由配置处理&#xff1a; 登录的路由配置 作用&#xff1a;把oAuth2.0颁发的token存储到redis中 package com.powernode.config;import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject;…