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 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...
随机推荐
- Win10下python不同版本同时安装并解决pip共存问题
特别说明,本文是在Windows64位系统下进行的,32位系统请下载相应版本的安装包,安装方法类似. 使用python开发,环境有Python2和 python3 两种,有时候需要两种环境切换使用,下 ...
- Kali学习笔记40:SQL手工注入(2)
上一篇讲到可以通过注入得到数据库中所有的表信息 而SQL注入能不能做数据库之外的事情呢? 读取文件: ' union select null,load_file('/etc/passwd') -- 为 ...
- Spark基础-scala学习(二、面向对象)
面向对象编程之类 //定义一个简单的类 scala> :paste // Entering paste mode (ctrl-D to finish) //类默认public的 class He ...
- ubuntu16.04 uninstall cuda 9.0 completely and install 8.0 instead
卸载cuda 9.0sudo apt-get --purge remove cudasudo apt autoremoveto remove cuda 9.0 Thensudo apt-get cle ...
- 利用 Linux tap/tun 虚拟设备写一个 ICMP echo 程序
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面两篇文章已 ...
- java super和this总结
今天群里有人问我怎么复写父类的构造函数,我当时听错了以为是一般方法,然后就对他说只要同名就可以,然后他告诉我错了,我再仔细看,才知道他问的是复写 父类的构造方法,其实自己也不知道子类能不能复写父类的构 ...
- 项目总结三:目标检测项目(Car detection with YOLOv2)
1. the YOLO model (YOLO ,you only look once) (1)We will use 5 anchor boxes. So you can think of the ...
- 浅谈JavaScript 函数作用域当中的“提升”现象
在JavaScript当中,定义变量通过var操作符+变量名.但是不加 var 操作符,直接赋值也是可以的. 例如 : message = "hello JavaScript ! " ...
- 菜鸟系列docker——docker镜像上(3)
1. 镜像image 镜像和容器的关系就和安装包和程序的关系一样,有了镜像才可以启动容器,容器是镜像的一个运行实例. 1.1 镜像的结构 通过第二节仓库,可能很多看官已经查看到镜像是分层的,接下来将对 ...
- MySQL系列详解八:MySQL多线程复制演示-技术流ken
前言 Mysql 采用多线程进行复制是从 Mysql 5.6 开始支持的内容,但是 5.6 版本下有缺陷,虽然支持多线程,但是每个数据库只能一个线程,也就是说如果我们只有一个数据库,则主从复制时也只有 ...