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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
JavaScript编写开发动态时钟
Jul 29 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
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
javascript arguments使用示例
2014/12/16 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python递归函数绘制分形树的方法
2018/06/22 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
洗煤厂厂长岗位职责
2014/01/03 职场文书
地理教师岗位职责
2014/03/16 职场文书
党员公开承诺书内容
2014/05/20 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
家属慰问信
2015/02/14 职场文书
医生个人年终总结
2015/02/28 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
通知范文怎么写
2015/04/16 职场文书
室外天线与收音机天线杆接合方法
2022/04/05 无线电