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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
编辑浪子版表单验证类
May 12 Javascript
csdn 博客的css样式 v3
Feb 24 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
原生js的数组除重复简单实例
May 24 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
JS实现简单九宫格抽奖
Jun 28 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
php5.2.0内存管理改进
2007/01/22 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP如何将XML转成数组
2016/04/04 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python中的推导式使用详解
2015/06/03 Python
python冒泡排序简单实现方法
2015/07/09 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Django  ORM 练习题及答案
2019/07/19 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
重大事项社会稳定风险评估方案
2014/06/15 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫