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


Posted in Javascript onSeptember 21, 2020

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

<header>
  ...
</header>
<router-view></router-view>

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

<header v-show="$route.name!=='login'">
  ...
</header>
<router-view></router-view>

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

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

一、菜单项激活状态保持

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

现在给出以下解决办法:

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

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

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

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

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

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

<script>
export default {
 beforeCreate() {
   console.log(this.$route)
   const nextPath = this.$route.query.nextPath
  this.$router.replace({ path: nextPath})
  console.log("调用")
  console.log(nextPath)
 },
 render: function(h) {
  return h() // avoid warning message
 }
}
</script>

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

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

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

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

以上这篇在vue中实现某一些路由页面隐藏导航栏的功能操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
js中位运算的运用实例分析
Dec 11 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
vue3.0 上手体验
Sep 21 #Javascript
微信小程序实现点击页面出现文字
Sep 21 #Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 #Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 #Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 #Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 #Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 #Javascript
You might like
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
angular十大常见问题
2017/03/07 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python实现126邮箱发送邮件
2020/05/20 Python
如何在python中实现线性回归
2020/08/10 Python
Python如何telnet到网络设备
2021/02/18 Python
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
护理自荐信
2013/10/22 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
霸王洗发水广告词
2014/03/14 职场文书
财务会计专业自荐书
2014/06/30 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
执行力心得体会范文
2016/01/11 职场文书