vue列表页跳转到列表详情页再返回到列表页|vue列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态
第一步，在App.vue文件下加入keep-alive
刚开始我也是看的网上但是大多数是这样的
一开始我也是按照这样来的后面发现从列表页跳转到列表详情页的时候再返回第一次是没问题的，但是你点击其他列表跳到详情页的时候，详情页面还是前面的那个详情页面，从列表页传来的参数也没变化，后面就把下面那个判断删除才可以了，所以这里看自己项目需求
第二步 在路由文件中 ：router/index.js，给被要被缓存的页面设置 meta 属性（这里就是列表页），不需要缓存的视图，不用添加
{
path: 'management',
name: 'Management',
component: Management,
meta:{
keepAlive: true //此页面需要缓存
}
}
第三步，在详情页里面设置 beforeRouteLeave
beforeRouteLeave(to,from,next){
//设置下一个路由的meta,让列表页面缓存,即不刷新
to.meta.keepAlive = true
next()
}
第四步， 实现滚动行为的代码：router/index.js
scrollBehavior(to,from,savePosition){
if(savePosition){
//解决页面从列表页跳转到详情页返回,初始在原来位置
return savePosition
}else{
//解决页面跳转后页面高度和前一个页面高度一样
return {x:0,y:0}
}
}
【vue列表页跳转到列表详情页再返回到列表页|vue列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态】这样我们就把这个需求给解决了。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目