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 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...
随机推荐
- InnoDB Insert Buffer(插入缓冲)
InnoDB Insert Buffer(插入缓冲) 每个存储存储引擎自身都有自己的特性(决定性能以及更高可靠性),而InnoDB的关键特性有: 插入缓冲(Insert Buffer)-->Ch ...
- 每天学点SpringCloud(十二):Zipkin全链路监控
Zipkin是SpringCloud官方推荐的一款分布式链路监控的组件,使用它我们可以得知每一个请求所经过的节点以及耗时等信息,并且它对代码无任何侵入,我们先来看一下Zipkin给我们提供的UI界面都 ...
- Pycharm用Ctrl+鼠标滚轮控制字体大小
一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...
- 从前端中的IOC理念理解koa中的app.use()
忙里偷闲,打开平时关注的前端相关的网站,浏览最近最新的前端动态.佼佼者,平凡的我做不到,但还是要争取不做落后者. 前端中的IoC理念,看到这个标题就被吸引了.IoC 理念,不认识呢,点击去一看,果然没 ...
- AI - Tips
01- Playground http://playground.tensorflow.org TensorFlow的网页工具Playground提供了几种简单类型的data,可以调节网络结构.学习率 ...
- java开发之多线程基础篇
首先我们先来了解下线程的生命周期上一张图: Java线程具有五中基本状态 新建状态(New):当线程对象对创建后,即进入了新建状态,如:Thread t = new MyThread(); 就绪状态( ...
- 解决spring的bean同名冲突
今天工作发现当不同模块下有相同bean然后又被同一个模块引用的话就会导致bean同名冲突,如下: 解决方案很简单,如果是xml配置直接修改bean的名称即可,如果是注解形式修改如下: 只要在servi ...
- 【shiro】(1)---了解权限管理
了解权限管理 一.概念 1.什么是权限管理 只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源. 权限管理包 ...
- Java提高(5)---map集合排序
map集合排序 这篇文章讲的不仅仅是map排序,比如把对象按某一属性排序,它都可以解决这些问题. 比如,有N个对象,每个对象有个属性就是成绩,成绩分:优秀,良好,合格.那我们如何按照成绩的好坏进行排序 ...
- 解决运行nodejs代码Error: listen EADDRINUSE
问题是什么 EADDRINUSE其实拆分来看就是error address use表示错误地址的使用,也代表着端口占用. 如何解决问题 那讲道理来说,接下来你就需要找到你要用的端口被哪一个进程所占用了 ...