vue.js底部导航栏的子路由不显示怎么处理

这次给大家带来vue.js底部导航栏的子路由不显示怎么处理,处理vue.js底部导航栏子路由不显示的注意事项有哪些,下面就是实战案例,一起来看一下。

最近利用vue第三方UI MuseUI开发webapp,然后在导航栏这里出现了问题,我需要在导航栏上的几个路由上显示底部导航栏,在其他路由上不显示,就这个问题,MuseUI的底部导航栏直接加载在app.vue里面,会每个页面都有导航栏,所以这种方式不可行,后来我真的使出了浑身解数,去MuseUI作者GitHub上面提问,无果,去segmentfault上面提问,无果,去vue官方群提问,无果,在提问之前,我都是经过一番搜索,思考的,但是这些都让我崩溃了。可能出错的地方从路由URL,museUI的使用BUG,到加入钩子函数,都预想过,都不是,没关系,坚持就是胜利,可能是我的努力感动了上苍,找到了解决方案。

router.js

const router = new VueRouter({ mode: 'history', routes: [  { path: '/first', component: firstView, meta: { navShow: true, cname: '一级页面' }, name: 'first' },  { path: '/sub', component: subView, meta: { navShow: false, cname: '子页面' }, name: 'sub' }, ],});

登录后复制

app.vue


登录后复制

这是我找到的解决方案,之后根据这个修改了自己的代码,成功解决了。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

JS怎样扩展字符串拼接

Nginx的配置文件怎样分段下载

立即学习“前端免费学习笔记(深入)”;

以上就是vue.js底部导航栏的子路由不显示怎么处理的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2773728.html

(0)
上一篇 2025年3月8日 13:57:29
下一篇 2025年3月8日 13:57:38

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • AngularJS怎么重新加载路由页面

    这次给大家带来AngularJS怎么重新加载路由页面,AngularJS重新加载路由页面的注意事项有哪些,下面就是实战案例,一起来看一下。 用angular做项目,会碰到需要点击菜单刷新当前页面,加载当前页面,但是同一个路由页面点击没反应;…

    编程技术 2025年3月8日
    000
  • Node.JS实现段点续传配置文件的分段下载

    这次给大家带来Node.JS实现段点续传配置文件的分段下载,Node.JS实现段点续传配置文件分段下载的注意事项有哪些,下面就是实战案例,一起来看一下。 Header标签 请求 Request Header: 下载 3744 以后的文件内容…

    编程技术 2025年3月8日
    200
  • vue.js中怎么导入css库

    这次给大家带来vue.js中怎么导入css库,vue.js中导入css库的注意事项有哪些,下面就是实战案例,一起来看一下。 1.安装以下模块,让webpack可以解析css文件 cnpm install style-loader –sav…

    编程技术 2025年3月8日
    200
  • Vue.js怎样实现图片可以随意拖动摆放

    相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章! 推荐阅读: 这次给大家带来Vue.js怎样实现图片可以随意拖动摆放,Vue.js实现图片可以随意拖动摆放的注意事项有哪些,下面就是实战案例,一起来看一下。 主要代码如…

    编程技术 2025年3月8日
    200
  • js怎样实现中文拼音的A-Z排序

    这次给大家带来js怎样实现中文拼音的A-Z排序,js实现中文拼音的A-Z排序的注意事项有哪些,下面就是实战案例,一起来看一下。 实现中文按照A-Z的方法,可以在vue的methods里面写入: methods:{ pySort:functi…

    编程技术 2025年3月8日
    200
  • vue.js移动数组位置并实时更新视图

    这次给大家带来vue.js移动数组位置并实时更新视图,vue.js移动数组位置并实时更新视图的注意事项有哪些,下面就是实战案例,一起来看一下。 使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作。 需要对option…

    编程技术 2025年3月8日
    200
  • Vue在打包项目以后刷新显示404应该怎么处理

    这次给大家带来vue在打包项目以后刷新显示404应该怎么处理,处理vue在打包项目以后刷新显示404的注意事项有哪些,下面就是实战案例,一起来看一下。 vue打包项目后刷新404的问题Nginx配置 server { listen 80; …

    编程技术 2025年3月8日
    200
  • angular4的JS内存溢出问题如何解决

    这次给大家带来angular4的JS内存溢出问题如何解决,解决angular4的JS内存溢出问题注意事项有哪些,下面就是实战案例,一起来看一下。 最近在写基于angular4的项目的时候,在build –prod的时候,突然措手…

    编程技术 2025年3月8日
    200
  • vue配置怎么请求本地的json数据

    这次给大家带来vue配置怎么请求本地的json数据,vue配置请求本地的json数据的注意事项有哪些,下面就是实战案例,一起来看一下。 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder …

    编程技术 2025年3月8日
    200
  • JS如何实现JSON数组内的去重算法

    这次给大家带来js如何实现json数组内的去重算法,js实现json数组的重算法的注意事项有哪些,下面就是实战案例,一起来看一下。 需求描述:去除JSON数组中paymode字段相同的项,并将paymoney累加。 paylist:[{pa…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论