vue切换路由后页面显示顶端

最新推荐文章于 2023-05-03 16:09:03 发布
原创 最新推荐文章于 2023-05-03 16:09:03 发布 · 3.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#页面置顶 #vue切换路由页面置顶 #vue显示最顶端

本文介绍了一种在Vue.js应用中使页面滚动到顶部的简单方法，并展示了如何在组件创建时调用该方法。

methods（）{     }中：

menu() {
  window.scrollTo(0,0);
},

created（）{     } 中：

this.menu();

vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？
猿小白的博客
02-06 7626
使用vue切换页面的时候，发现右侧的滚动条的位置似乎存在缓存似的，当右侧滚动条默认在顶部，切换页面的时候，位置停留在顶部，但当右侧滚动条的停留位置不是在顶部的时候，右侧滚动条停留的位置就会是上一个页面右侧滚动条停留的位置，因此，需要寻找一种方法解决这个问题。 下面是解决办法，只需要在router/index.is 里面增加一个scrollBehavior函数，并且指定对应位置即可，x=0,y=0时，默认为顶部，当然你想要设置为其它的位置也是可行的，具体改变对应的x和y的值即可。 // router..
【插件】vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容
工作中遇到问题记录
01-29 1723
vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容,VueHead,vuehead
Vue---路由
gaoqiandr的博客
05-03 873
本文主要介绍了vue中的路由相关，多为代码实战
vue.js 初次路由显示设置
毛没齐的博客
08-22 1340
①设置 path 为 ‘/’ const router= new VueRouter({ routes:[ {path:'/',name:'home',component:Home}, //页面第一显示的组件 {path:'/menu',name:'menu',component:Menu}, {path:'*',redirect:'/'...
vue页面切换到滚动页面显示顶部
热门推荐
诗雨远方的博客
01-05 1万+
vue页面切换到滚动页面显示顶部     在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示。 一、目标： ‘listview’进入详情页面时详情页面从页面顶部开始显示。 二、让首先查了下两个页面的scrollY,每次都是不一样的,也没
Vue路由跳转定位到顶部
guliyue的博客
02-16 1866
vue路由跳转页面之后页面不从最顶端显示问题
业务逻辑_vue路由跳转时定位到页面顶部
qq_43260366的博客
11-26 868
仅需要在当前页面（page）合适的位置加入一下代码即可。2.在created函数中。1.在组件-前置守卫中。
vue2.0路由切换后页面滚动位置不变BUG的解决方法
01-19
最近项目中遇到这样一个问题，vue切换路由，页面到顶端的滚动距离仍会保持不变。 立即试用 个人中心 useRightNow(){ if(判断用户存在){ this.$router.push('/user') }else{ this.$router.push(/login) } } ...
vue3页面路由监测
最新发布
03-08
### Vue 3 中实现页面路由监听的方法 在 Vue 3 中，可以通过多种方式来监听路由的变化。主要方法依赖于 `vue-router` 提供的功能以及 Composition API 的灵活性。 #### 使用 `watch` 和 `useRoute` 为了响应式的...
Vue实现导航栏菜单
10-14
在Vue.js中实现导航栏菜单是一项基础而重要的任务，它能为用户提供清晰的页面结构和交互体验。在提供的代码示例中，我们看到一个简单的Vue应用，用于创建一个左侧导航栏菜单，当用户点击菜单项时，右侧内容区域会...
vue router 跳转后回到顶部的实例
10-18
今天小编就为大家分享一篇vue router 跳转后回到顶部的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE——解决跳页面跳转后 新页面没有位于顶部的问题
qq_39206750的博客
01-08 3141
01 问题： 页面通过路由调转后，新页面停留的位置与上一级页面一致 02. 解决 在配置路由时候 加上：scrollBehavior:() => ({ y = 0 }), const router = new VueRouter({ scrollBehavior: () => ({ y: 0 }), routes: [ ] }) 03. 原因 使用组件缓存时 再次切换...
Vue路由跳转定位顶部（自动/手动）
The_more_more的博客
05-05 2183
Vue路由跳转定位顶部（自动/手动） 背景了解 当我们在做vue项目的时候，使用编程式或者声明式导航跳转的时候，如果页面过长，定位的地方就不是顶部，我们需要拉到顶部去预览，这样就显得十分麻烦。 解决方案 1、自动 我们可以在路由的前置守卫哪里添加代码 router.beforeEach((to, from, next) => { // 兼容chrome document.body.scrollTop = 0 // 兼容firefox document.docum
vue路由跳转页面滚动到顶部
qq_45723621的博客
10-14 2481
注意: 这个功能只在支持 history.pushState 的浏览器中可用。今日一句： 遇见问题不要慌抽根烟，看官网。
vue router 跳转后回到顶部
zcy_csdn123的博客
03-06 9759
在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); })
vue路由跳转时定位到页面顶部的方法汇总
wh_xmy的博客
04-16 7013
背景：在做vue项目时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法： 方式一： 在main.js中添加以下代码即可： router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0...
vue-router跳转页面后置顶问题
zhaolinru的博客
09-21 3461
vue-router跳转页面后置顶问题解决方法 只需要在main.js的router中加入以下代码： const router = new VueRouter({ routes: r, //在此处加入 scrollBehavior(to,from,savedPosition){ if(savedPosition){ return saved...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
boy火巨的博客
05-16 6527
在网上查了一下，网友说还可以试试在main.js入口文件配合vue-router写这个router.afterEach((to,from,next) => {  window.scrollTo(0,0);});原文连接：http://www.jb51.net/article/129270.htm...
vue路由跳转 定位到页面顶部
nilmao的博客
04-05 3851
Vue-router 路由跳转之后，页面默认停留在当前浏览的位置， 想要的是路由跳转之后，页面重新定位到顶部， 1.下面介绍一下可以实现的方法： 在理由配置文件中，添加以下代码即可 import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' Vue.use(VueRouter); let router = new VueRouter({ routes }); //要添加的代
解决Vue路由切换页面不更新问题的三种方法
本文主要探讨了Vue路由切换页面不更新的问题及其解决方案。在Vue应用中，由于路由切换实际上是组件的动态加载而不是实际的页面刷新，可能会导致某些情况下组件未能正确更新。针对这个问题，本文提供了两种解决方案：...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值