antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
5星 · 超过95%的资源 117 浏览量
2020-10-14
23:37:35
上传
评论
收藏 44KB PDF 举报 
antd vue 刷新保留当前页面路由刷新保留当前页面路由,保留选中菜单保留选中菜单,保留保留menu选选
中操作中操作
主要介绍了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
})
}
},
weixin_38612437
- 粉丝: 5
- 资源: 907
- 1
- 2
前往页