在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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
JS实现换肤功能的方法实例详解
Jan 30 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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浮点数精度问题汇总
2015/05/13 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
JS中操作JSON总结
2020/12/06 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python实现飞机大战
2018/09/11 Python
set在python里的含义和用法
2019/06/24 Python
Python求离散序列导数的示例
2019/07/10 Python
基于keras中的回调函数用法说明
2020/06/17 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
网络编辑岗位职责
2014/03/18 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
大型活动组织方案
2014/05/10 职场文书
激励员工的口号
2014/06/16 职场文书
学校教师安全责任书
2014/07/23 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript