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 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP入门速成(2)
2006/10/09 PHP
一个程序下载的管理程序(四)
2006/10/09 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
JS验证身份证有效性示例
2013/10/11 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
pyside写ui界面入门示例
2014/01/22 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
MYSQL支持事务吗
2013/08/09 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
电影雨中的树观后感
2015/06/15 职场文书
Python基础之元编程知识总结
2021/05/23 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS