官方用例: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 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置的更多相关文章

  1. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  2. js-点击按钮页面滚动到顶部,底部,指定位置

    之所以笔记一下这个,因为我在项目中经常用到. $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, ...

  3. jQuery-点击按钮页面滚动到顶部,底部,指定位置

    $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //页面滚动至顶部 $('. ...

  4. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. jsp 页面跳转后修改数据,返回时不更新

    项目jsp页面上用隐藏input框接收获取数据,在跳转入另一页面前,js操作修改数据,但返回时发现无效. 需求是点击抽奖后机会减少一次,但是当做跳转操作后返回时,次数有缓存问题 jsp: <in ...

  6. 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

    1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...

  7. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  8. vue2.0路由切换后页面滚动位置不变BUG

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变.  方法一: 监听路由 // app.vue export default { watch:{ '$route':func ...

  9. 关于angular跳转路由之后不能自动回到顶部的解决方法

    Question: angular2 scroll top on router change 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...

随机推荐

  1. 每天学点SpringCloud(九):SpringCloud最常用配置详解

    Eureka 属性名 说明 默认值 eureka.server.enable-self-preservation 关闭注册中心的保护机制,Eureka 会统计15分钟之内心跳失败的比例低于85%将会触 ...

  2. 第86节:Java中的JQuery基础

    第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display ...

  3. Redis 指令 学习笔记

    Redis 什么是Redis redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,还提供了多个语言的API,操作比较方便 安装re ...

  4. python读取xml文件示例

    最近用到了xml格式的文件,对这些没啥印象,顺便学习一下,做个例子,方便后续查阅. xml文档: <annotation> <folder>VOC2012</folder ...

  5. 关于在vscode中以https方式请求!不是以file文件夹访问!vscode中 ajax请求

    在vscode 头疼的问题是 用浏览器查看网页!会是以文件夹的方式打开的!  我遇到这个问题 我还重新配置了Apache    ! 但是现在可以解决: 使用vscode  ============== ...

  6. spring boot -thymeleaf-异常处理

    异常流程 :controller-ControllerAdvice-异常解析器-默认的error页面 1.错误页面error.html: 程序出现异常会自动跳到error.html里,视频效果,该页面 ...

  7. OS之进程管理---多线程模型和线程库(POSIX PTread)

    多线程简介 线程是CPU使用的基本单元,包括线程ID,程序计数器.寄存器组.各自的堆栈等,在相同线程组中,所有线程共享进程代码段,数据段和其他系统资源. 传统的的单线程模式是每一个进程只能单个控制线程 ...

  8. stack源码

    stack概述 stack是一种先进后出的数据结构,它只有一个出口,允许新增元素.移除元素.取得最顶端元素,但每次只能处理顶端元素,也就是说,stack不允许遍历行为. stack定义 以某种既有容器 ...

  9. Java单元测试(Junit+Mock+代码覆盖率)

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  10. 在微信小程序中使用图表

    前言:网上有许多的图表库,如:Echarts.Tau Charts.ChartJS等等,具体自行百度. 这次我们使用的是:Echarts 官方教程:点击查看 Echarts下载地址:飞机直达 1.下载 ...