vue中实现某一些路由页面隐藏导航栏功能的方法

　　介绍

今天就跟大家聊聊有关vue中实现某一些路由页面隐藏导航栏功能的方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

为了将导航栏显示在每一个页面中,可以将导航栏与& lt; router-view>放在同一级显示,如下:

& lt; header> 　　… 　　& lt;/header> 　　& lt; router-view> & lt;/router-view>

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

& lt;头v-show=? route.name !==& # 39;登录# 39;“比; 　　… 　　& lt;/header> 　　& lt; router-view> & lt;/router-view>

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

<强> vue + el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)

<强>一、菜单项激活状态保持

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

现在给出以下解决办法:

vue中实现某一些路由页面隐藏导航栏功能的方法

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

: default-active=皉oute.path"美元。

<强>二,实现页面的路由刷新(局部刷新)

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

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

& lt; script> 　　出口默认{ 　　beforeCreate () { 　　console.log(这一点。路线美元) 　　const nextPath=route.query.nextPath美元 　　美元。路由器。替换({路径:nextPath}) 　　console.log(“调用“) 　　console.log (nextPath) 　　}, 　　呈现:函数(h) { 　　返回h()//避免警告消息 　　} 　　} 　　& lt;/script>

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

//实现路由的局部刷新 　　reloadRouter(路径){ 　　美元。router.replace ({ 　　路径:“/redirect", 　　查询:{ 　　nextPath:路径 　　} 　　}); 　　}

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

vue中实现某一些路由页面隐藏导航栏功能的方法

看完上述内容,你们对vue中实现某一些路由页面隐藏导航栏功能的方法有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。

vue中实现某一些路由页面隐藏导航栏功能的方法