vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置
官方用例:https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index.vue' Vue.use(Router) const router = new Router({
mode: 'history',//这种方法只能在history模式下使用
routes: [
{
path: '/',
name: 'index',
component: index
}
],
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition //游览器返回记住位置
} else {
return { x: , y: } //滚动到顶
}
}
})
export default router
vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置的更多相关文章
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- js-点击按钮页面滚动到顶部,底部,指定位置
之所以笔记一下这个,因为我在项目中经常用到. $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, ...
- jQuery-点击按钮页面滚动到顶部,底部,指定位置
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //页面滚动至顶部 $('. ...
- [js常用]页面滚动的顶部,指定位置或底部,平滑滚动
js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- jsp 页面跳转后修改数据,返回时不更新
项目jsp页面上用隐藏input框接收获取数据,在跳转入另一页面前,js操作修改数据,但返回时发现无效. 需求是点击抽奖后机会减少一次,但是当做跳转操作后返回时,次数有缓存问题 jsp: <in ...
- 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法
1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...
- [HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...
- vue2.0路由切换后页面滚动位置不变BUG
最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. 方法一: 监听路由 // app.vue export default { watch:{ '$route':func ...
- 关于angular跳转路由之后不能自动回到顶部的解决方法
Question: angular2 scroll top on router change 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...
随机推荐
- 每天学点SpringCloud(八):使用Apollo做配置中心
由于Apollo支持的图形化界面相对于我们更加的友好,所以此次我们使用Apollo来做配置中心 本篇文章实现了使用Apollo配置了dev和fat两个环境下的属性配置.Apollo官方文档https: ...
- Ubuntu18.04版本设置root账户
Linux系统下文件的权限十分重要,大多数操作都需要一定的权限才可以操作,Ubuntu18.04默认安装是没有设置root账户的,因此想要获得root账户登录可以使用以下步骤: 1.首先获得临时的 ...
- 更新RecyclerView的好方法
一般在使用RecyclerView的时候不免要修改RecyclerView的数据,使用notifyDataSetChanged()来刷新界面,但是当数据比较多,而只是修改了一点的数据,或者刷新比较频繁 ...
- Numpy学习三:数组运算
1.转置 #reshape(shape)函数改变数组形状,shape是一个元组,表示数组的形状 创建一个包含15个元素的一维数组,通过reshape函数调整数组形状为3行5列的二维数组arr = np ...
- 浅谈static关键字的四种用法
1.修饰成员变量 在一个person类中,一个成员变量例如 String name,当new2个person()对象时候,这2个对象在堆的位置是不同的,给name赋值张三.李四,这两个对象的name是 ...
- Mybatis Cause: java.lang.ClassNotFoundException: Cannot find class:
MyBatis原因:java.lang.ClassNotFoundException:找不到类. 原因你的xml文件中的返回类型错误,没有找到这个类. 检查类名是否正确,检查路径是否正确. 在复制my ...
- Spring理解IOC,DI,AOP作用,概念,理解。
IOC控制反转:创建实例对象的控制权从代码转换到Spring容器.实际就是在xml中配置.配置对象 实例化对象时,进行强转为自定义类型.默认返回类型是Object强类型. ApplicationCon ...
- SpringDataJPA与Mybatis的优异性
首先表达个人观点,JPA必然是首选的. 个人认为仅仅讨论两者使用起来有何区别,何者更加方便,不足以真正的比较这两个框架.要评判出更加优秀的方案,我觉得可以从软件设计的角度来评判.个人对 mybatis ...
- Google Chrome 书签导出并生成 MHTML 文件
目的 因为某些原因需要将存放在 Google Chrome 内的书签导出到本地,所幸 Google Chrome 提供了导出书签的功能. 分析 首先在 Google Chrome 浏览器当中输入 ch ...
- linux overcommit flag
linux中有一个overcomit的配置,这个配置关系到进程在过多申请memory资源的时候,系统的表现(启发式允许,不检查,or 阻止) /proc/sys/vm/overcommit_memor ...