我这里有两种方法都是可以用的

1,利用vue-router的默认模式hash,可以记录上一页的位置,如果需要点话,如果没有记录,在进入新页面的时候是返回到新页面的最顶部的

    scrollBehavior (to, from, savedPosition) {
console.log('这里是1:',to, from, savedPosition);
/*
* 如果有记录位置,进入新页面的时候滚动到记录的位置
* 如果没有记录位置,进入新页面的时候就在最顶部
*/
if(savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
}

2,直接利用JavaScript的window的方法便可。

router.afterEach((to, from, next) => {
window.scrollTo(0,0);
})

vue-cli跳转到新页面的顶部的更多相关文章

  1. Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

    今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法 其实原理很 ...

  2. PHP弹出提示框并跳转到新页面即重定向到新页面

    本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下   这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...

  3. react中实现点击跳转到新页面方法

    实现点击跳转到新页面,可以有两种形式,一个是本地页面打开,一个是本地页面不变跳转到新的页面. (一)页面点击本地页面打开新页面 引入ant的Button组件 <Button style={{ba ...

  4. 问题:使用ajax跳转到新页面无效(浏览器Safari)

    问题:使用ajax跳转到新页面无效(浏览器Safari)   window.open("{% url "runtestinfo" %}")   但是使用loca ...

  5. H5如何实现关闭当前页面,跳转到新页面?

    小程序有此功能的跳转方法. 那么H5如何实现该功能?  很简单. location.replace('new.html')  这个方法可以实现 关闭当前页面,跳转到新页面 的效果. 而   windo ...

  6. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

  7. Java web开发中页面跳转小技巧——跳转后新页面在新窗口打开

    最近学习Java web,在学习过程中想实现一个需求,就是在jsp页面跳转的时候,希望跳转后的新页面在新窗口中打开, 而不是覆盖原来的页面,这个需求使我困惑了好长时间,后来通过大海捞针似的在网上寻找方 ...

  8. vue 单页应用点击某个链接,跳转到新页面的方式

    <router-link class="goDetail" :to="{name: 'detail',params: {id:item.id}}" tar ...

  9. Android Studio实现页面跳转(新页面或者网站)

    一,跳转到另一个页面 百度了好久,好像好多种方法,从中挑选了一中比较方便的一中方法 利用Intent类进行实现 1,首先在firstActivity中添加相应的跳转命令代码 例如一下示例代码 if ( ...

随机推荐

  1. vue+webpack项目 url的问题了解

    阮一峰js模块化 webpack打包 url-loader vue Loader ES6 模块化  babel成CommonJS规范的实现 能正常显示图片的写法如下, src通过控制台可以看到被web ...

  2. Selenium+PhantomJS替代方案

    问题描述: python3在使用selenium+PhantomJS动态抓取网页时,出现如下报错信息: UserWarning: Selenium support for PhantomJS has ...

  3. RandomAccessFile出现中文乱码问题

    之前程序里调用了RandomAccessFile的writeByte(String str)方法,报文里存在中文的时候出现了乱码 后面换成了 write(byte b[])或writeBytes(by ...

  4. Mathematica/偏导数/最小二乘法(线性回归)

    a = / a //输出的还是2/123 N[a] //输出的就是小数点 N[a,] //保留三位小数点 Clear[a] Solve[== x^- , x] //结果-3 和 3 Plot[Sin[ ...

  5. Linux 用户组

    文件权限 r w x 文件时的权限介绍 r 可读  可以使用 cat.less等命令 w 可写 可以编辑,删除此文件 x 可执行 可以命令行模式下提交给内核运行此命令 当时目录时 r 可以使用ls列出 ...

  6. 利用Owin解决CORS报错问题

    我的项目是vue + ASP.NET .在 Vue调试时,由于vue开启的调试用的服务器端口号 和 后台.NET程序的端口号是不同的,发送Ajax请求时,就会报错.这里就不提报错的原因了,网上有很多, ...

  7. oracle查询某张表的外键,并用 truncate 命令有外键的表中的数据

    注:本文来源于<oracle查询某张表的外键(最终解决办法)> 一:几个查询表外键的脚本 select b.table_name, b.column_name from user_cons ...

  8. 插入MongoDB文档:mongo控制台查看插入到MongoDB文档中的内容

    const MongoClient = require('mongodb').MongoClient; const assert = require('assert'); const url = 'm ...

  9. Python爬取指定重量的快递价格

    目录 一.获取查询接口 二.获取相关数据 三.编写爬虫脚本 四.查看查询效果 背景:现在这个时代,快递横飞.我们想寄一个快递,给出的选择也是多种多样的(根据快递的大小.送达的时间.寄送的距离及价格.公 ...

  10. C# Post方式下,取得其它端传过来的数据

    // Post方式下,取得java端传过来的数据 if ("post".Equals(context.Request.HttpMethod.ToLower())) { contex ...