在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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
面包屑导航详解
Dec 07 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
vue实现简单跑马灯效果
May 25 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
用JQUERY增删元素的代码
2012/02/14 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
获取Django项目的全部url方法详解
2017/10/26 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
蜜蜂引路教学反思
2014/02/04 职场文书
办公室岗位职责
2014/02/12 职场文书
环境保护标语
2014/06/20 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
pytorch 如何使用float64训练
2021/05/24 Python