好资源导航 » 文章资讯 » antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

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

2023-07-19 05:54:07 81

废话不说，上代码！





nav1





nav2





nav3

重点：

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

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

刷新页面，成功！

补充知识：vue根据路由刷新页面（切换菜单刷新页面）

刷新页面有两种方法：

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

一种是用provide+inject，

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

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

1.在app.vue页面中加入

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方法，里面就是调用重新加载的方法

调用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();
},

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐