在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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
UI Events 用户界面事件
Jun 27 Javascript
判断ie的两种简单方法
Aug 12 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
react组件基本用法示例小结
Apr 27 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
Java无向树分析 实现最小高度树
Apr 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
php列出一个目录下的所有文件的代码
2012/10/09 PHP
基于php下载文件的详解
2013/06/02 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
javascript 写类方式之三
2009/07/05 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Django中url的反向查询的方法
2018/03/14 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
Python修改DBF文件指定列
2020/12/19 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
客服部班长工作责任制
2014/02/25 职场文书
绿色学校实施方案
2014/03/31 职场文书
2014年法务工作总结
2014/12/11 职场文书
小学班级标语口号大全
2015/12/26 职场文书
python 提取html文本的方法
2021/05/20 Python