vue实现返回上一页面,页面停留在原来位置,不刷新
在需要更新的时候就用EventBus来刷新列表。keep-alive组件 keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。
在点餐的时候,我们提交到确认订单却又返回了,从新再点。这时我们返回时就不能刷新,所以最好是这个点餐和确认订单是在一个页面的。如果使用mui的单页面,可能会是页面太多了不方便操作。再加上接口什么的,就内容过多。
如果使用的是 vue-router ,this.$router.go(-1) 就可以回到上一页。history.go(-1) 是回到浏览器上一页。
vue-scroller记录滚动位置的示例代码
切换到其他页面前记录位置,返回列表页的时候返回位置。
Vue图片水平滚动滚动条高亮滚动位置可以使用Vue的v-scroll指令来实现。v-scroll指令可以接受一个参数,用于指定滚动条的高亮位置。例如:,其中index参数用于指定滚动条高亮位置,可以是一个数字或者一个字符串。
当用户进入一个页面的时候,会往 history 栈中放入当前的记录,对页面级别的操作通过操作内置对象 history 可以满足一些需求。
vue项目keep-alive返回记住滚动条位置
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
从详情1返回列表时正常,进入其它页面,返回,列表数据更新,进入详情2,返回列表,此时列表会自动定位到从列表进入详情1时的位置,而不是进入详情2前的位置。
keep-alive组件 keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。
移动端页面H5,在列表页,点击跳到详情页,再按浏览器的返回键,回到列表页,需要保持滚动条原位置。
vue中,我们有时候需要实现这种场景:搜索页面到列表页面,需要刷新重新获取数据。从详情页面返回列表页面需要记住上次浏览的状态。
列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路:切换到其他页面前记录位置,返回列表页的时候返回位置。
vue返回上一页面时回到原先滚动的位置
如果使用的是 vue-router ,this.$router.go(-1) 就可以回到上一页。history.go(-1) 是回到浏览器上一页。
嘛,遇见问题第一件事干嘛。百度啊,看思路啊。思想比较明确,尤其是vue,貌似生来就与vuex判定在一起了嘛。大概思路就是离开页面时保存位置,回到界面时利用滚动到那个位置就行了。网上的回答是这样的。
当然有些页面不需要缓存,就要进行一些处理,这里就不多讲了,因为估计大家都知道(不知道百度去...)。EventBus(事件总线)EventBus用于实现组件之间的数据通讯,使用起来非常之简单。
如果想在vue路由跳转后滚动到指定的位置,只需要调用内置方法(scrollBehavior)既可。