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

 更新时间:2020年08月06日 09:30:50   作者:yangliwei.top:88  
这篇文章主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

废话不说,上代码!

<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选中操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Weex基于Vue2.0开发模板搭建

    详解Weex基于Vue2.0开发模板搭建

    这篇文章主要介绍了详解Weex基于Vue2.0开发模板搭建,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vue短信验证性能优化如何写入localstorage中

    vue短信验证性能优化如何写入localstorage中

    这篇文章主要介绍了vue短信验证性能优化写入localstorage中的方法,解决这个问题需要把时间都写到localstorage里面去,具体解决方法大家参考下本文
    2018-04-04
  • 策略模式实现 Vue 动态表单验证的方法

    策略模式实现 Vue 动态表单验证的方法

    策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法。这篇文章主要介绍了策略模式实现 Vue 动态表单验证,需要的朋友可以参考下
    2019-09-09
  • vue中关闭eslint的方法分析

    vue中关闭eslint的方法分析

    这篇文章给大家讲述了vue中关闭eslint的方法内容,有需要的读者们可以参考学习下。
    2018-08-08
  • Vue+Django项目部署详解

    Vue+Django项目部署详解

    这篇文章主要介绍了Vue+Django项目部署详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue 项目的成功发布和部署的实现

    Vue 项目的成功发布和部署的实现

    本文主要介绍了Vue 项目的成功发布和部署的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • vue实现图片上传预览功能

    vue实现图片上传预览功能

    这篇文章主要为大家详细介绍了vue实现图片上传预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)

    Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)

    其实想要实现功能很简单,就是在一张图片上监听鼠标滑轮滚动的事件,然后根据上滚还是下滚实现图片的缩放,这篇文章主要介绍了Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能,需要的朋友可以参考下
    2023-03-03
  • 实时通信Socket io的使用示例详解

    实时通信Socket io的使用示例详解

    这篇文章主要为大家介绍了实时通信Socket io的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue cli及Vue router实例详解

    Vue cli及Vue router实例详解

    vue-cli是vue官方出品的快速构建单页应用的脚手架,里面集成了webpack,npm,nodejs,babel,vue,vue-router,这篇文章主要介绍了Vue cli及Vue router详解,需要的朋友可以参考下
    2022-08-08

最新评论