vue解决跳转时新页面没有置顶

ue页面跳转后当前位置不在顶部的解决办法(几种办法)

1，在main.js中添加如下代码：

// 跳转后返回顶部router.afterEach((to,from,next) => {window.scrollTo(0,0);})
//或者
router.beforeEach((to, from, next) => {    // chromedocument.body.scrollTop = 0// firefoxdocument.documentElement.scrollTop = 0// safariwindow.pageYOffset = 0next()
})

2，在路由的index.js中，添加如下代码：

scrollBehavior(to, from,savedPosition) {//if判断可加可不加、根据自己需求//savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用if (savedPosition) {return savedPosition}return {x: 0,y: 0}}

3，解决：在配置路由时候加上：scrollBehavior:() => ({ y = 0 }),

const router = new VueRouter({scrollBehavior: () => ({ y: 0 }),routes: [ ]
})

原因：使用组件缓存时再次切换到此组件路由不触发mounted钩子函数（不知理解对与否，欢迎指正。）
额外

但是是还有个问题依旧没有彻底克服！
比如，如果当前页面是首页，点击页面中的"首页"选项后，却依然不置顶，那么只能老老实实的增加个回到顶部了。

 toYpWebsite () {// this.$router.push('/ypWebsite')document.body.scrollTop = document.documentElement.scrollTop = 0

vue解决跳转时新页面没有置顶相关推荐

vue 页面不置顶问题(页面内操作、页面跳转后) - 集合篇
文章目录 vue 页面内切换dom,页面跳转后都不置顶? 一.页面内操作: 1.1 代码如下: 二.页面之间跳转: 2.1 代码截图 · 说明: 2.2 增加代码 · 示下: 三.拓展 · (直接置 ...
html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...
LaTeX中表格默认在页面中置顶怎么取消？
LaTeX中表格默认在页面中置顶怎么取消? 表格.图都默认在这一页置顶,已尝试过以下方法均不行: 1.[htbp]调节方式,无论如何调节没有任何变化 2.\usepackage{float} + [H ...
vue路由跳转刷新页面
1 . 路由跳转后地图上的数据不显示. 2 . 直接刷新整个页面. 首先呢,这次的bug是因为首页的地图显示出来了,可是地图上的数据没显示出来,而地图两边的前端数据又正常显示了.没有报错,根据警告上看 ...
【避坑指“难”】页面Top置顶（返回顶部）小图标实现逻辑
窗口大小在不同浏览器中确定浏览器窗口大小没有想象中那么容易.所有现代浏览器都支持 4 个属性: innerWidth innerHeight outerWidth outerHeight outer ...
vue实现跳转新页面重顶部开始
1,在单页面中加入updated() { //页面加载完毕事件window.scroll(0, 0); }
vue列表跳转详情页面上一条下一条的实现
首先在点击跳转的地方传值 on: {click: () => {this.$router.push({path:`./detail`,query:{detailId: params.row.de ...
vue项目跳转新页面滚动到顶部
1.首先排除整体页面有没有使用overflow:scroll/auto,如使用,则会出现window.scroll一直处于scrollTop=0的效果 2.router的index.js文件中 con ...
解决RecyclerView在ScrollView中会置顶它上面的控件
通常情况下,需要在RecyclerView上加布局可以通过自己定义adapter然后add header来添加. 但是也还有一种方法来实现,那就是用ScrollView来嵌套,比如这样的代码: < ...

vue解决跳转时新页面没有置顶

ue页面跳转后当前位置不在顶部的解决办法(几种办法)

vue解决跳转时新页面没有置顶相关推荐

最新文章

热门文章