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

这篇文章主要介绍了在vue中实现某一些路由页面隐藏导航栏的功能操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

 
...

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

 
...

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

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

一、菜单项激活状态保持

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

现在给出以下解决办法:

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

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

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

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

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

 

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

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

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

以上就是在vue中实现某一些路由页面隐藏导航栏的功能操作的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程