Vue-Vue-router跳转页面时返回顶部

第一种方法:main.js

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

  

第二种方法:

 在创建router实例时,做如下的配置

 savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
        return savedPosition
    }
    return {x: 0, y: 0}
}

  

原文地址:https://www.cnblogs.com/cocoxia/p/8479568.html

时间: 2024-10-06 11:15:40

Vue-Vue-router跳转页面时返回顶部的相关文章

web.xml配置SpringMVC时导致访问的页面资源不存在,跳转页面时出现404

web.xml配置文件 ,配置SpringMVC: <servlet> <servlet-name>springMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 设置配置文件的名称 和路径 --> <init-param> <param-name>con

微信小程序跳转页面时参数过长导致参数丢失

问题描述: 微信小程序:跳转页面时传参,参数过长导致参数丢失 跳转到文章详情页时,使用的文章链接e.currentTarget.dataset.id过长导致参数丢失 handleClickArticle: function (e) { wx.navigateTo({ url: '/pages/index/articleinfo/articleinfo?urllink=' + e.currentTarget.dataset.id }) }, 解决方案: 调用微信的API,将参数编码传送,解码接收,

HTML页面实现返回顶部效果 go to top

1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(".backtop").fadeIn(); }else { $(".backtop").fadeOut(); } }); $(".backtop").click(function(event){ $('html,body').animate({scrollTop:

HTMl页面中返回顶部的几种实现

??最近在开发网站需要制作返回顶部按钮,但是我主要为后端开发,对前端不太熟练,经过网上资料查询,制作出了返回顶部的按钮,下面是两种简单的方式,记录一下.喜欢本网站的朋友可以收藏下,会不定期更新学习资料. 第一种:引用外部jQuery 新建HTML页面,将下面代码复制保存,通过浏览器打开,即可看到效果. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&

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

1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } 位置如下: 2. 还可以在实例router对象的时候设置 export default new Router({ mode: 'hash', // base: '/dist/', scrollBehavior: () => ({ y: 0

html中提交表单并实现不跳转页面处理返回值

<html> <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> <!-- 处理iframe回调的代码块 --> <script type="text/javascript"> var handlerFlag

swift tabbar 跳转子页面时隐藏方法

//注意:在push后设置self.hidesBottomBarWhenPushed=NO; //这样back回来的时候,tabBar会恢复正常显示. let detailCtrl = ScanViewController(nibName: "ScanViewController", bundle: nil); //detailCtrl.hidesBottomBarWhenPushed = true self.hidesBottomBarWhenPushed = true self.n

页面中返回顶部区域设置

页面滑动时,某区域固定不动 原文地址:https://www.cnblogs.com/learning-python/p/10274185.html

博客园页面添加返回顶部TOP按钮

1. 进入网页管理->设置 2. 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 #back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer; } 3. 在"页脚Html代码&q