antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作


Posted in Javascript onAugust 06, 2020

废话不说,上代码!

<a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]">
     <a-menu-item :key="'/home'">
      <router-link to="home">
       <a-icon type="user" />
       <span>nav 1</span>
      </router-link>
     </a-menu-item>
     <a-menu-item :key="'/about'">
      <router-link to="about">
       <a-icon type="video-camera" />
       <span>nav 2</span>
      </router-link>
     </a-menu-item>
     <a-menu-item :key="'/123123'">
      <router-link to="123123">
       <a-icon type="upload" />
       <span>nav 3</span>
      </router-link>
     </a-menu-item>
    </a-menu>

重点:

1,selectedkeys要设置成$route.path地址

2,a-menu-item 的key设置成要去的地址

刷新页面,成功!

补充知识:vue根据路由刷新页面(切换菜单刷新页面)

刷新页面有两种方法:

一种是用:localtion.reload();但是这种是重新加载页面,造成一闪一闪的效果。

一种是用provide+inject,

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

1.在app.vue页面中加入

<div id="app">
   <router-view v-if="isRouterAlive"></router-view>
 </div>
provide() {
   return{
    reload: this.reload
   }
  },
  data() {
   return {
    isRouterAlive: true
   }
  },
 methods: {
   reload () {
    this.isRouterAlive = false;
    this.$nextTick(function () {
     this.isRouterAlive = true
    })
   }
  },

2.在菜单页面加入

inject: ['reload'], // 注入重载的功能(注入依赖)
watch: {
  //检测路由参数发生改变时,刷新当前页面 调用
  '$route': function(){
   // this.reload();
  }
 },

3.注意这个@click方法,里面就是调用重新加载的方法

<el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
          :index="item[pathKey]"
          @click="open(item)"
          :key="item[labelKey]"
          :class="{'is-active':vaildAvtive(item)}"
          >

调用this.reload()方法,即可重新加载路由刷新页面。

open(item) {
   if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
   this.$router.$avueRouter.group = item.group;
   this.$router.push({
    path: this.$router.$avueRouter.getPath({
     name: item[this.labelKey],
     src: item[this.pathKey]
    }),
    query: item.query,
   });
   this.reload();
  },

以上这篇antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
JavaScript 动态生成方法的例子
Jul 22 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 #Javascript
Javascript如何递归遍历本地文件夹
Aug 06 #Javascript
通过vue刷新左侧菜单栏操作
Aug 06 #Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 #Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 #Javascript
前端开发基础javaScript的六大作用
Aug 06 #Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 #Javascript
You might like
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
总结python中pass的作用
2019/02/27 Python
python实现图片压缩代码实例
2019/08/12 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
python中关于数据类型的学习笔记
2020/07/19 Python
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
《再见了,亲人》教学反思
2014/02/26 职场文书
医生见习报告范文
2014/11/03 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年春节标语口号
2014/12/09 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
初三毕业感言
2015/07/31 职场文书
小学校本教研总结
2015/08/13 职场文书
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
python Tkinter模块使用方法详解
2022/04/07 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android