Vue路由跳转新页面无法回到顶部怎么解决

最新推荐文章于 2022-06-30 09:50:11 发布

原创最新推荐文章于 2022-06-30 09:50:11 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

本文介绍了如何在Vue项目中解决页面路由切换后位置未自动定位到顶部的问题，通过在main.js中添加简单的afterEach钩子函数实现滚动到顶部的解决方案。

背景

Vue页面路由跳转后，页面的位置是和上个页面位置一致的，没有自动定位到顶部。

解决

在 main.js中添加代码即可解决

router.afterEach(() => {
  document.documentElement.scrollTop = 0;
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_刘旭

关注关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue路由跳转之后页面停留在上一个浏览页面位置不会回到顶部

cxy980626的博客

01-26

1471

解决方案：在App.vue中添加如下代码： watch: { $route: function (to, from) { if(from.name == 'pLindex'){ document.getElementById('app').scrollTop = 0; } }, },

vue-element-ul中回到顶部功能不生效问题和快捷实现方法

seeeeeeeeeee的博客

06-18

703

element-ul原版本的代码 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 直接copy不生效，可以换成这样 <el-backtop :visibility-height="60">

3 条评论您还未登录，请先登录后发表或查看评论

解决vue页面跳转之后，页面没有回到顶部的问题

逆风优雅的博客

01-19

2206

问题展示：解决方法：使用路由的前置钩子(路由守卫) router.beforeEach((to, from, next) => { // 路由跳转后，让页面回到顶部 // chrome document.body.scrollTop = 0; // firefox document.documentElement.scrollTop = 0; // safari window.pageYOffset = 0; // 调用 next()，一定要调用 next 方法，否则钩

vue项目中跳转页面后显示内容不在顶部

yycnf的博客

02-05

743

vue项目中跳转页面后显示内容不在顶部原因：在项目中使用了el-scrollbar组件，导致scrollTop始终为0 解决办法：1、给el-scrollbar组件ref属性，ref=scrollTop 2、监听$route 3、在路由改变时执行this.$refs.scrollTop.wrap.scrollTop=0 这样就解决了跳转路由后自动回到顶部 ...

vue路由跳转时不会自动到达最顶部问题解决

weixin_48453178的博客

05-06

993

问题描述：当不在顶部进行页面跳转时，跳转的页面不在最顶部，而是在点击跳转的位置，导致体验感不佳。解决方案：利用vue的全局后置钩子，在每次页面跳转之后进行回调，实现自动返回顶部的功能，只需在index.js下加入如下代码即可： router.afterEach(() => { window.scrollTo(0,0); }) ...

vue相同路由跳转强制刷新该路由组件操作

10-14

在Vue.js应用中，路由是...在进行路由跳转和组件刷新时，理解Vue Router的工作原理至关重要，这可以帮助我们编写出更加灵活且可维护的代码。同时，遵循最佳实践和避免常见错误，如路由命名冲突，也能提高应用的质量。

vue 实现路由跳转时更改页面title

10-16

在Vue应用中实现路由跳转时更改页面标题是一项常见的需求，它能够改善用户体验，让浏览器的标签页标题与当前用户访问的页面内容保持一致。本篇将详细介绍如何在Vue项目中，利用Vue Router来实现路由跳转时自动更改...

解决vue+router路由跳转不起作用的一项原因

11-20

在这个问题中，我们将深入探讨为什么在某些情况下，`vue-router`的路由跳转可能不起作用，以及如何通过设置`mode: 'history'`和配置服务器来解决这个问题。首先，Vue Router有两种工作模式：`hash`模式和`history`...

Vue路由跳转问题记录详解

08-30

在本文中，我们将深入探讨一个具体的Vue路由跳转问题，以及如何解决这个问题。首先，我们要了解Vue Router的基本结构。在示例中，我们看到这样的路由配置： ```javascript { path: '/tab', component: Tab, ...

Vue路由切换页面不更新问题解决方案

10-15

如果在子组件中需要触发路由刷新，可以使用Vue实例提供的$nextTick方法来确保在组件状态更新后再进行路由跳转。具体实现可以通过在子组件中注入父组件提供的刷新方法，并在需要的时候调用。此外，还可以考虑在路由...

vue路由跳转时进入新的页面，滚动条的位置停留在上个页面的位置，没有回到顶部

ITCwg的博客

01-27

1266

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动在router下的index.js文件加上以下代码下面展示一些内联代码片。 router.afterEach((to, from, next) => { document.querySelector("body").setAttribute("style", "overflow: auto !important;")

VUE——解决跳页面跳转后 新页面没有位于顶部的问题

qq_39206750的博客

01-08

3141

01 问题：页面通过路由调转后，新页面停留的位置与上一级页面一致 02. 解决在配置路由时候加上：scrollBehavior:() => ({ y = 0 }), const router = new VueRouter({ scrollBehavior: () => ({ y: 0 }), routes: [ ] }) 03. 原因使用组件缓存时再次切换...

解决vue页面之间跳转，页面不是在顶部的问题

hui_54520的博客

06-30

1292

解决vue路由调整不在顶部

Vue路由跳转新页面，新页面不在顶端问题

weixin_43732080的博客

05-26

696

设置"滚动条高度"解决滚动条高度设置方法：window.scrollTo(p1, p2) window.scrollTo(param1, param2) param1: x轴坐标，距离屏幕左上角x轴距离 param2: y轴坐标，距离屏幕左上角y轴距离结合此方法，实现Vue跳转新页面，新页面置顶 新页面mounted()中：（mounted()是Vue生命周期函数，在页面渲染前执行） mounted() { this._loadNewPage(); }, 新页面methods.

解决vue路由跳转页面之后页面不从最顶端显示问题

dbzh1979的博客

07-18

1183

在router/index.js文件中 const router = new VueRouter({ scrollBehavior(to,from,saveTop){ if(saveTop){ return saveTop; }else{ return {x:0,y:0} } }, }) 转载于:https://www.cnblogs.com/wxyz9527/p/11206734...

Vue页面跳转后位置不在顶部的解决办法

zhangxiaodui的博客

10-16

4848

最近在做的Vue项目中，从一个长页面跳到另一个路由后，页面的位置还停留在上个页面的位置，没有回到顶部，怎么办呢？以下是解决办法。找到你的路由文件（我的是router文件夹下的index.js），加入下图绿色框框中的代码就可以啦。 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0} } ...

Vue页面跳转后当前位置不在顶部的解决办法

ObcEIGHTEEN的博客

06-15

810

Vue页面跳转后当前位置不在顶部的解决办法 1.route 路由文件下index.js下添加 routes:[], -> scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0} } 解决啦

vue 切换“页面”（路由）时保持滚动条回到顶部

Kris的博客

12-25

6212

vue项目做pc端的时候，发现在两个页面切换时滚动条没有回到顶部而是保持原先的位置，这是由于vue是单页面应用，只是更换了路由内容，还在当前页面滚动条是不会回到顶部的。解决办法是在切换路由的时候，将滚动条复位为0。在App.vue文件下，添加watch事件，全局监听路由，亲测有效。 components:{ publicTop, publicFooter, }, // 使用watch 监听K...

vue 点击路由跳转（地址重复）报错以及路由跳转滚动条未回滚到顶部问题

郝峰vip的博客

12-08

703

前言最近在用vue-cli4 , vue3.0开发项目时，遇到了路由跳转时当点击同一个路由地址时就会报错，另一个问题就是路由跳转后记住了上一次页面的滚动条的位置，未回滚到顶部。 step 一，路由跳转时当点击同一个路由地址(也就是路由地址重复)时就会报错,或者刷新报错 main.js import Router from 'vue-router' const routerPush = Router.prototype.push Router.prototype.push = function pu

vue路由跳转新页面

最新发布

04-23

### Vue.js 中实现路由跳转的方法在 Vue.js 中，通过 `vue-router` 可以轻松实现页面之间的跳转。以下是几种常见的方法以及其实现方式。 #### 方法一：基础路径跳转如果只需要简单的页面跳转而无需传递参数，可以直接定义好路由表并使用 `$router.push()` 或 `<router-link>` 实现跳转。例如： ```javascript // 定义路由配置 (src/router/index.js) import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; // 页面组件A import Login from '@/components/Login'; // 页面组件B Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, }, { path: '/login', name: 'Login', component: Login, } ] }); ``` 在模板中可以这样写： ```html <router-link :to="{name: 'Login'}">前往登录页</router-link> ``` 或者在 JavaScript 中调用： ```javascript this.$router.push({ name: 'Login' }); ``` 以上代码展示了如何从当前页面跳转至 `/login` 页面[^2]。 --- #### 方法二：带参数的跳转当需要向目标页面传递数据时，可以在跳转时附加查询字符串或动态路由参数。例如，在点击按钮后触发函数完成跳转操作。 ##### 使用查询参数 (`query`) ```html <el-button type="primary" @click="navigateToEditPage(essay.id)">编辑文章</el-button> <script> methods: { navigateToEditPage(id) { this.$router.push({ path: '/essayedit', query: { id } }); // 添加查询参数id } } </script> ``` 接收端可以通过 `this.$route.query` 获取这些参数[^3]。 ##### 动态路由匹配另一种更优雅的方式是利用动态路由参数。修改路由配置如下： ```javascript { path: '/essay/:id/edit', // 动态部分:id name: 'EssayEdit', component: () => import('@/views/EssayEdit') }, ``` 然后执行跳转命令： ```javascript this.$router.push({ name: 'EssayEdit', params: { id: essay.id } }); ``` 注意：这里必须指定路由名称(`name`)而不是路径(`path`)，因为只有命名路由支持这种形式的参数传递[^3]。 --- #### 方法三：权限控制下的跳转对于某些特殊场景比如管理员后台管理界面可能只允许已认证用户进入，则需加入权限校验机制。下面是一个基于导航守卫的例子： ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; router.beforeEach((to, from, next) => { const isAuthRequired = to.matched.some(record => record.meta.requiresAuth); // 判断是否有requiresAuth标记 if (isAuthRequired && !localStorage.getItem('token')) { // 假设存储令牌于localstorage return next('/login'); // 若未授权则重定向回登陆页 } next(); // 继续正常流程 }); new Vue({ router, render: h => h(App), }).$mount('#app'); ``` 此段脚本会在每次切换视图前自动检测是否满足条件再决定下一步动作[^1]。 --- ### 总结综上所述，Vue 提供了灵活多样的手段来进行跨页面间的转移处理，无论是普通的链接还是复杂的业务逻辑都能很好地应对。