vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)
2019-08-14 20:20
2663 查看
一、菜单项激活状态保持
有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢?
现在给出以下解决办法:
即加上这样一段代码即可:
:default-active="this.$route.path"
二、实现页面的路由刷新(局部刷新)
想要实现路由的刷新,官方并没有给出解决办法,通过自己摸索和借鉴,得出了以下解决方法:
首先,新建一个空白页面redirect.vue,然后写入这样一段代码:
<script> export default { beforeCreate() { console.log(this.$route) const nextPath = this.$route.query.nextPath this.$router.replace({ path: nextPath}) console.log("调用") console.log(nextPath) }, render: function(h) { return h() // avoid warning message } } </script>
之后在导航页加入一个方法,如下:
//实现路由的局部刷新 reloadRouter(path) { this.$router.replace({ path: "/redirect", query: { nextPath: path } }); }
再通过给每一个菜单项添加点击事件,即可实现该功能:
相关文章推荐
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- 利用Jquery的ajax局部刷新实现菜单 导航栏效果
- js实现刷新页面后select标签保持选中状态
- 使用php后台给自己做一个页面路由,配合ajax实现局部刷新。
- vue通过路由实现页面刷新的方法
- 在vue项目开发中实现刷新当前路由页面
- 如何利用Vue实现页面的局部刷新
- JS实现对gridview中的checkbox的选中个数记录,并在页面刷新时保持checkbox的状态 .
- 如何利用Vue实现页面的局部刷新
- Vue实现远程获取路由与页面刷新导致404错误的解决
- 如何利用Vue实现页面的局部刷新
- layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
- 实现Web页面中级联菜单的设计/实现动态加载列表框/实现自动刷新页面/实现Web页面的局部动态更新/实现自动完成功能
- 如何利用Vue实现页面的局部刷新
- el-menu及嵌套路由实现点击导航栏显示不同内容而导航栏不动功能
- vue实现导航栏效果(选中状态刷新不消失)
- Vue模拟数据,实现路由进入商品详情页面的示例
- jquery 实现页面局部刷新ajax做法