antdvue刷新保留当前页⾯路由，保留选中菜单，保留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根据路由刷新页⾯（切换菜单刷新页⾯）
刷新页⾯有两种⽅法：
⼀种是⽤:load()；但是这种是重新加载页⾯，造成⼀闪⼀闪的效果。
⼀种是⽤provide+inject，
provider/inject：简单的来说就是在⽗组件中通过provider来提供变量，然后在⼦组件中通过inject来注⼊变量。
需要注意的是这⾥不论⼦组件有多深，只要调⽤了inject那么就可以注⼊provider中的数据。⽽不是局限于只能从当前⽗组件的prop属性来获取数据。
1.在app.vue页⾯中加⼊
<div id="app">
react router缓存<router-view v-if="isRouterAlive"></router-view>
</div>
provide() {
return{
reload: load
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true
})
}
},
2.在菜单页⾯加⼊
inject: ['reload'], // 注⼊重载的功能（注⼊依赖）
watch: {
//检测路由参数发⽣改变时，刷新当前页⾯调⽤
'$route': function(){
// load();
}
},
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)}"
>
调⽤load()⽅法，即可重新加载路由刷新页⾯。
open(item) {
if (this.screen <= 1) this.$storemit("SET_COLLAPSE");
this.$router.$up = up;
this.$router.push({
path: this.$router.$Path({
name: item[this.labelKey],
src: item[this.pathKey]
}),
query: item.query,
});
},
以上这篇antd vue 刷新保留当前页⾯路由，保留选中菜单，保留menu选中操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。