在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 null和undefined区别分析
Oct 14 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
js post提交调用方法
Feb 12 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
JS控制下拉列表左右选择实例代码
May 08 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调用Webservice思路及源码分享
2014/06/04 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
python实现根据文件格式分类
2019/10/31 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
化工专业应届生求职信
2013/11/08 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
班组长安全职责
2014/01/05 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
商场主管竞聘书
2014/03/31 职场文书
班组长竞聘书
2014/03/31 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
绵山导游词
2015/02/05 职场文书
教师个人成长总结
2015/02/11 职场文书
同乡会致辞
2015/07/30 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript