vue所有的组件公用同一个导航栏的方法

最新推荐文章于 2024-07-19 20:58:37 发布
最新推荐文章于 2024-07-19 20:58:37 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 学生信息管理系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43719616/article/details/117561911
版权

Vue.js 组件 路由嵌套 复用 前端开发
关键词由CSDN通过智能技术生成

需求：所有的组件都公用红框中的导航栏。
在这里插入图片描述
实现：
1.红框中的框架骨架用一个vue敲出来，比如我是home.vue
2.然后其他的所有要在红框骨架中显示的组件就写在home.vue的孩子路由中。
在这里插入图片描述
over

日京
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用vue写以一个精美公共头部导航栏
weixin_42604188的博客
12-23 788
好的，在 Vue 中写一个公共头部导航栏的基本步骤如下： 创建一个 Vue 组件，用于渲染头部导航栏。这个组件可以包含头部导航栏的所有 HTML 代码和相关的样式。 在组件的 data 属性中声明头部导航栏中显示的内容。这些内容可以是菜单项的名称、链接等。 在组件的 template 中使用 v-for 指令来遍历 data 中的内容，并渲染出头部导航栏的 HTML 结构。 在其他需要使用...
用vue写以一个精美公共头部多级导航栏
weixin_35755640的博客
12-23 510
<p>好的，我会尽力为你提供一些指导。</p> <p>首先，我们需要在 Vue 组件中定义一个数组来存储导航栏的数据，这个数组可以包含一些对象，每个对象代表一个导航栏项目。每个对象应该有一些属性，例如标题、链接地址、子菜单等。</p> <p>然后，我们可以使用 Vue 的指令来渲染导航栏。这里我们可以使用 <code>v-fo...
vue设置导航栏、侧边栏为公共页面的例子
10-16
今天小编就为大家分享一篇vue设置导航栏、侧边栏为公共页面的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-element 多菜单共用同一模板，监听路由导致页面加载慢
u013114451的博客
07-01 548
需求说明：两个菜单项跳转到同一个地址，只是参数不同。 解决方案： 第一步，定义路由，仅 path 参数不同，其他一样。 第二步，监听 fullPath 的变化，（注意，一定要监听 fullPath 或 path，而不能监听整个 route，不然会导致该页面加载非常慢）。 ...
前端组件化技术实践：Vue自定义顶部导航栏组件的探索
最新发布
chenchuang0128的博客
07-19 1107
摘要随着前端技术的飞速发展，组件化开发已成为提高开发效率、降低维护成本的关键手段。本文将以Vue自定义顶部导航栏组件为例，深入探讨前端组件化开发的实践过程、优势以及面临的挑战，旨在为广大前端开发者提供有价值的参考和启示。一、引言在前端开发中，随着业务复杂度的不断提升，传统的整体式开发方式已经难以满足快速迭代和高效维护的需求。组件化开发作为一种新型的开发模式，通过将复杂的界面拆分为独立的、可复用的组件，实现了代码的模块化，提高了开发效率和代码质量。
vue设置公用导航栏
qq_37949984的博客
06-06 8196
我不是天生的王者，但我骨子里流淌着不让我低头的血液。 首先，项目结构如下： 想要让导航栏、侧边栏变为公共页面，则要在App.vue页面中加入。假设已经有了Header.vue和Left.vue，这里就不贴出来了，App.vue代码如下： <template> <div id="app"> <!-- 其他页 --> <el-cont...
vue 中实现两个路径指向同一个页面
hello world
11-04 2460
今天项目中有个要求，vue页面一个页面里展示图表需要单独拿出来，就是只能访问图表内容，看不到导航 vue页面本就是嵌套显示的，只需要把页面单独拿出来放到页面中 第一个路径是在导航栏中，第二个写在导航栏外，设置hideInMenu=true不让它在导航栏中显示，设置alias添加副路径， 之后可以单独访问该路径就能只显示页面内容 ...
vue设置导航栏、顶部栏为公共页面
FJ101113的博客
10-08 2181
首先全局引入需要的两个组件 import LeftSide from '@/components/leftSide/index'; import CrmHeader from '@/components/crmHeader/index'； Vue.component('LeftSide',LeftSide); Vue.component('CrmHeader',CrmHeader); 然后在MainApp.vue中添加如下代码 <!-- 实际运用场景中，登录注册页面我们不希望出现，所以用keep-a
Vue3+TS从零到一开发通用组件—导航栏(案例详细流程，含源码)
weixin_45745641的博客
11-22 3460
Vue3+TS从零到一开发通用组件—导航栏前言一、准备工作二、开始整活1.创建组件样式部分TS部分2.注册组件使用总结 前言 Vue3+TS是目前前端vue开发的趋势，Vue3相对2来说有更好的响应式，函数式，模板编译优化等等，Ts是js的超集，可读性和维护性更高。这篇文章教大家如何从零到一利用Vue3+TS开发一个通用组件——导航栏，前端ui使用的是bootstrap框架，先来看一下实现的效果： 未登录状态： 登录状态： 一、准备工作 这里就默认你们电脑装了Vue以及Ts （不会的点我）,然后创建
Vue全局分页组件的实现代码
10-18
为了满足监控控制台界面显示成千上万条表格数据时的分页需求，本文介绍了一个Vue全局分页组件的实现方法。此组件不仅支持调整每页显示的条数，还包括总页数、当前页码、前进后退、自由跳转等操作。 具体而言，这个...
第五章 Vue组件化
qq_15906903的博客
01-18 228
5.1 组件的概念 组件（component） 是 Vue.js 最强大的功能之一。 Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。 通常一套系统会以一棵嵌套的组件树的形式来组织： 例如：项目可能会有头部、底部、页侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件 组件就是对局部视图的封装，每个组件包含了： HTML 结构 CSS 样式 J
Vue封装工具栏
AN_MIN的博客
10-17 2270
1、在页面如html、jsp重复写着相同的代码，挺繁琐，而且不便于维护，以下尝试自己学习如何封装工具栏，比如四个按钮：添加删除、修改、查询等，后面可以自己扩展 2、工具栏js /**公共工具栏*/ Toolbar = function(config) { //config是调用时候，传递过来的参数 this.config = config; this.render = funct...
vue导航栏/公共组件在部分页面显示,在其它页面不显示
weixin_43983711的博客
03-13 2579
需求：结合拖拽的返回首页按钮，让在首页/登陆页不展示出来，其他页面都展示的需求进行开发 1 .router-view结合$route.meta 在app.vue <template> <div id="app"> <div v-if="$route.meta.keepAlive"> <router-view v-wechat-tit...
Vue学习 —— 创建公共tabbar功能
因风初苒苒
05-23 285
一、使用脚手架Vue-cli2创建项目 二、处理样式 在src下的asset文件夹下存放资源，创建img文件夹用于存放图片；创建css文件夹用于存放公共样式，css文件夹下创建base.css，先将边距设置为0 在app.vue中引入base.css 三、编写tabbar组件 在components组件文件夹下创建tabbar文件夹，文件夹下创建Tabbar.vue以及tabbarItem.vue 下面为tabbar.vue的代码: <template> <div id="tab-
Vue应用程序的UI文件/工具栏菜单
cuk5340的博客
07-29 858
Vue文件工具栏菜单 (vue-file-toolbar-menu) UI file/toolbar menus for Vue apps. Vue应用程序的UI文件/工具栏菜单。 View Demo 查看演示 View Github 查看Github 特征 (Features) Reactive content is stored in Vue.js computed/data fie...
解决vue+element 需求为：多个菜单指向同一个页面，页面的数据是根据选择的菜单来进行动态渲染
qq_44162778的博客
07-20 2780
问题： 1、根据element文档其中tags标签栏属性index代表菜单唯一性、路由地址 2、点击菜单页面数据不重新渲染 3、点击菜单进页面时没数据（前提：功能都已经全部完成） 解决： 1、解决菜单唯一性可以在index参数值后面添加参数 （“aaa?ID =” +res.data[i].ID） //因为我这里项目的需求只需要把其中一小块动态渲染就可以了， //所以我这里就直接请求的接口然后直接去push在数组里面的 数组.push({ key:'3-2-'+[i],
Vue自定义部分页面显示导航栏
j_l_sheng的博客
10-05 1823
vue前端自定义显示导航栏的页面
uniapp 学习笔记五 自定义导航栏组件的全局使用
Ggome的博客
08-27 953
全局引入 组件 uview 和 nav-custom, main.js中。局部引入test-my-comp.vue 自定义组件使用。page.json中 加上 隐藏 自带导航栏。引入并使用了colorUI和uView组件。homee.vue 中使用。
用vue2组件的形式写一个导航栏
07-16
下面是一个使用Vue 2组件形式编写的简单导航栏示例： ```vue (item.route)"> {{ item.label }} export default { data() { return { navItems: [ { id: 1, label: 'Home', route: '/' }, { id...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值