在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 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
jQuery限制图片大小的方法
May 25 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
JavaScript执行机制详细介绍
Dec 06 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数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
发布你的Python模块详解
2016/09/15 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Python简单实现控制电脑的方法
2018/01/22 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python实现Flappy Bird源码
2018/12/24 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python新手学习函数默认参数设置
2020/06/03 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
运动会广播稿100字
2014/01/11 职场文书
美术课外活动总结
2014/07/08 职场文书
个人优缺点总结
2015/02/28 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
合作意向书怎么写
2019/06/24 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server