element-Ui分页跳转后返回当前页(iview相同)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
由于每次打开都会重新加载页面的数据,因此在第二页(非第一页)的table中跳转后又从下一页返回,该页面会重新为第一页,解决方式有二种
第一是使用keep-alive,配合v-router的导航钩子
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
第二种是使用h5的 var history = window.sessionStorage
在created中 this.pageIndex = parseInt(history.getItem('pageIndex')) || 1
在分页点击事件中 history.setItem('pageIndex', value)
这里使用的是第二种,因为keep-alive的include属性失效,查询解决方法发现改动工作量太大,故使用第二种。
该方法存在一个问题那就是去的下一页不直接返回,而是去了其他一级菜单,从其他菜单再次进入该页的时候,依旧有缓存,解决就是给返回的界面设置 history.setItem('direction', 'back')
在该需要缓存的组件使用
if(direction == 'back'){
this.pageIndex = parseInt(history.getItem('pageIndex')) || 1
history.removeItem('direction')
}
实际使用中会出现一种场景,我在列表页去到详情页,在详情页更新了数据,回到列表页我希望保存上次的查询条件,同时能展示刚才的更新数据,这就需要结合上面的两种情况,具体代码如下:这个使用的是keep-alive加history,具体代码如下:
缓存页
// 这里要设置离开时清除缓存,因为除了详情需要缓存条件,其他的不需要
// 缓存当前的页数信息,以便详情页返回时使用
// 将router.js路由里面的meta设置.keepAlive为true
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false;
this.history.setItem('pageIndex', this.queryForPage.pageIndex)
this.history.removeItem('direction')
next()
},
activated () {
// keepAlive为true时使用缓存条件,重新刷新获取数据
// 如果 keepAlive为false改页面不会缓存,会重新加载页面
// 这里额外加上direction的判断是因为初始化加载时执行created函数和activated函数,避免重复请求
// 如果你的router设置keepAlive为false达到了你想要的效果
// 该辅助direction可以去掉,经测验只有设置为true时,第一次返回才有缓存的效果
// 当然其后的操作缓存是正常的
// 解决这个问题你也可以为**created**等里面的查询方法设置条件
let direction = this.history.getItem('direction')
if (this.$route.meta.keepAlive && direction) {
let pageIndex = parseInt(this.history.getItem('pageIndex')) || 1
this.searchData(pageIndex); // 这是我们获取数据的函数
}
}
详情页
// listName 是需要缓存的列表页,该处是列表页的详情,
// 下面的做法是只有详情返回才使用缓存,否则不使用
beforeRouteLeave (to, from, next) {
let name = to.name
if (name === 'listName' ) {
to.meta.keepAlive = true;
this.history.setItem('direction', 'back')
}
next()
}
created方式修改
created () {
if (!this.$route.meta.keepAlive) {
this.searchData(); // 这是我们获取数据的函数
}
},
经过分析得出了一个更优的解决方案,利用缓存时第一次执行created ,activated ,后续执行activated ,非缓存时执行created ,最终如下:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
需要缓存的页面
created () {
if (!this.$route.meta.keepAlive) {
this.searchData(); // 这是我们获取数据的函数
}
},
activated () {
let pageIndex = parseInt(this.history.getItem('pageIndex')) || 1
this.searchData(pageIndex); // 这是我们获取数据的函数
},
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false;
this.history.setItem('pageIndex', this.queryForPage.pageIndex)
next()
},
详情页
beforeRouteLeave (to, from, next) {
let name = to.name
if (name === 'listName' ) {
to.meta.keepAlive = true;
}
next()
}
备注:个人理解,希望可以帮到你
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)