废话不说,上代码!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
< 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页面中加入
1
2
3
|
< div id = "app" >
< router-view v-if = "isRouterAlive" ></ router-view >
</ div >
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
provide() {
return {
reload: this .reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this .isRouterAlive = false ;
this .$nextTick( function () {
this .isRouterAlive = true
})
}
},
|
2.在菜单页面加入
1
2
3
4
5
6
7
|
inject: [ 'reload' ], // 注入重载的功能(注入依赖)
watch: {
//检测路由参数发生改变时,刷新当前页面 调用
'$route' : function (){
// this.reload();
}
},
|
3.注意这个@click方法,里面就是调用重新加载的方法
1
2
3
4
5
6
|
<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()方法,即可重新加载路由刷新页面。
1
2
3
4
5
6
7
8
9
10
11
12
|
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选中操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/qq_32674347/article/details/92835764