废话不说，上代码！








nav 1











nav 2











nav 3














nav 1











nav 2











nav 3





重点：重点：重点：1，selectedkeys要设置成$route.path地址2，a-menu-item 的key设置成要去的地址刷新页面，成功！补充知识：vue根据路由刷新页面（切换菜单刷新页面）补充知识：补充知识：vue根据路由刷新页面（切换菜单刷新页面）刷新页面有两种方法：一种是用:localtion.reload()；但是这种是重新加载页面，造成一闪一闪的效果。一种是用provide+inject，provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。1.在app.vue页面中加入1.在app.vue页面中加入


provide() {

return{

reload: this.reload

}

},

data() {

return {

isRouterAlive: true

}

},
methods: {

reload () {

this.isRouterAlive = false;

this.$nextTick(function () {

this.isRouterAlive = true

})

}

},

provide() {

return{

reload: this.reload

}

},

data() {

return {

isRouterAlive: true

}

},
methods: {

reload () {

this.isRouterAlive = false;

this.$nextTick(function () {

this.isRouterAlive = true

})

}

},
2.在菜单页面加入2.在菜单页面加入
inject: ['reload'], // 注入重载的功能（注入依赖）
watch: {

//检测路由参数发生改变时，刷新当前页面 调用

'$route': function(){

// this.reload();

}
},
inject: ['reload'], // 注入重载的功能（注入依赖）
watch: {

//检测路由参数发生改变时，刷新当前页面 调用

'$route': function(){

// this.reload();

}
},3.注意这个@click方法，里面就是调用重新加载的方法3.注意这个@click方法，里面就是调用重新加载的方法

:index="item[pathKey]"

@click="open(item)"

:key="item[labelKey]"

:class="{'is-active':vaildAvtive(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();

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