网站地图    收藏   

主页 > 前端 > vue教程 >

在vue中实现某一些路由页面隐藏导航栏的功能操作

来源:自学PHP网    时间:2020-09-22 14:45 作者:小飞侠 阅读:

[导读] 在vue中实现某一些路由页面隐藏导航栏的功能操作...

今天带来在vue中实现某一些路由页面隐藏导航栏的功能操作教程详解

为了将导航栏显示在每一个页面中,可以将导航栏与放在同一级显示,如下:

...

但是,在某些时候,我们需要隐藏导航栏显示,比如登录界面,为了实现导航栏的隐藏,可以使用如下代码:

...

这样就可以实现隐藏导航栏。

补充知识:vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)

一、菜单项激活状态保持

有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢?

现在给出以下解决办法:

即加上这样一段代码即可:

:default-active="this.$route.path"

二、实现页面的路由刷新(局部刷新)

想要实现路由的刷新,官方并没有给出解决办法,通过自己摸索和借鉴,得出了以下解决方法:

首先,新建一个空白页面redirect.vue,然后写入这样一段代码:

之后在导航页加入一个方法,如下:

//实现路由的局部刷新
  reloadRouter(path) {
   this.$router.replace({
    path: "/redirect",
    query: {
     nextPath: path
    }
   });
  }

再通过给每一个菜单项添加点击事件,即可实现该功能:


以上就是关于在vue中实现某一些路由页面隐藏导航栏的功能操作全部内容,感谢大家支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论