位置: 编程技术 - 正文

vue 挂载路由到头部导航的方法(vue的挂载)

编辑:rootadmin

推荐整理分享vue 挂载路由到头部导航的方法(vue的挂载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3挂载全局方法,vue实例挂载对象,vue的挂载,vue 挂载dom,vue的挂载,vue 挂载dom,vue的挂载,vue的挂载,内容如对您有帮助,希望把文章链接给更多的朋友!

路由是写好了,但正确的切换路由方式不应该是我们在地址栏里面输入地址,有追求的方式是点击头部的导航菜单来切换,就像这样

我们点击上面的发现、关注、消息就切换路由导航

我们先把头部的导航写好

打开header.vue

先把vue组件的基本格式写好

然后开始布局写头部

这里很不好意思,我一直以为头部的header.vue是引入了的,实际上并没有........

打开app,vue重新编写一下

app.vue 代码:

vue 挂载路由到头部导航的方法(vue的挂载)

编写头部header.vue,这里的代码基本上可以从element-ui官网上直接copy,地址: index="2-1">xxxxxx<el-menu-item>,这里面的index,所以最笨的办法就是改index的值就行了,但这样就不够灵活了....

一般写导航的办法是这样的

这样在浏览器中的效果

这样点击导航菜单之后的跳转就完全正常了,这样写的好处就是很灵活,如果要加icon图标的话,也可以直接在router/index.js里面的配置路由部分加个字段class:classname,然后在循环的时候输出就可以了。当然这里一般是不把首页这个导航菜单显示出来的,我们可以直接在路由配置中加个hidden:true 就实现了

就像这样

效果

只需要简单的修改就可以完成了

这样在导航上挂路由就完成了,接下来写写样式,完善一下功能header.vue就差不多完成了

标签: vue的挂载

本文链接地址:https://www.jiuchutong.com/biancheng/377375.html 转载请保留说明!

上一篇:详解Vuex管理登录状态(vue+axios登录)

下一篇:利用HBuilder打包前端开发webapp为apk的方法(hbuilderx打包app教程)

  • 增值税专用发票抵扣期限
  • 契税是什么意思契税是过户费吗
  • 流动资产周转天数下降说明什么
  • 小规模纳税人进货分录
  • 应交税费例子
  • 资产负债表的累计折旧期末数怎么填
  • 预付押金是否可以作为成本
  • 税控盘280抵扣报税填在
  • 税屋网官网房屋
  • 买二手房为什么要交个人所得税
  • 股权增值转让的财税处理
  • 打官司赢了再付费叫什么
  • 客户为了凑整多打的款计入什么科目?
  • 企业事故赔偿支出可以抵税吗
  • 广告媒体类的企业怎么核算成本?
  • 关于补充养老保险
  • 质量罚款入什么科目
  • 个体工商户是否需要报税
  • 生产企业是否可以兼营外贸业务
  • 一般个体户核定税率多少
  • 还有主营业务收入这个科目
  • 工程完工财务要做些什么
  • 支付青苗补偿费怎么做账
  • 归还法人前期垫付款项
  • 如何关闭windows10资讯
  • 电脑屏幕保护不能设置
  • 如何防止程序被关闭
  • qqprotect.exe是什么进程?怎么结束此进程?
  • win10显示无法连接蓝牙
  • 小规模纳税人销售货物税率是多少
  • win11怎么用户改名
  • 购买车辆的会计分录该怎样做
  • 二手车交易如何开票
  • 地下开采对城区的影响
  • mac phpstudy
  • 工商年报纳税总额包括滞纳金吗
  • 小型企业资产负债表
  • SpringBoot+Vue实现文件上传下载功能
  • 销售自己使用过的固定资产
  • php array search
  • 税法折旧和会计折扣会计分录
  • 企业收到发票冲销怎么办
  • 企业所得税营业收入怎么填
  • 补缴去年的附加税怎么算
  • 负数发票开票条件?
  • 甲供工程范围
  • 使用权资产是什么意思
  • mysql 表不存在报错信息
  • sql递减
  • 旧设备出口可以退税吗
  • 企业应如何合理安排筹资期限的组合方式,优化资金结构
  • 支付稿费怎么做凭证
  • 收到多收的款会计处理
  • 施工企业开专票还是开普票好
  • 企业为什么一定要给员工缴纳社保
  • 借款和工程款可以分开吗
  • 金蝶当月没有账如何结转到下月
  • mysql随机选择
  • mysql中排序规则是什么意思
  • 快速解决小孩便秘
  • solaris 10安装
  • Gene6 FTP在windows 2008上面破解后无法启动解决方法
  • gitlab linux
  • debian启用ssh
  • ubuntu设置关闭按钮在右侧
  • 笔记本搜索功能用不了
  • win98拨号上网
  • 恢复已删除的聊天记录微信
  • win1020h2版本千万别更新
  • 实例的英文
  • js与css有什么区别
  • li的简单应用
  • jquery教程w3c
  • iframe的高度自适应
  • python模拟操作
  • java 信号量 超时
  • 上海餐饮增值税
  • 税务局风险防控工作总结
  • 企业房产如何过户给个人
  • 2021北京餐饮业发展趋势报告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设