vue路由跳转到新页面时置顶

最新推荐文章于 2024-10-23 14:36:08 发布

原创最新推荐文章于 2024-10-23 14:36:08 发布 · 810 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #router #route

本文介绍如何使用Vue的scrollBehavior选项解决路由跳转时滚动位置的问题，确保每次跳转后页面都回到顶部，提升用户体验。

vue 路由跳转就是通过对 history.pushState() 和 history.replaceState() 方法的模拟来实现，会往 history 栈中存放一条记录，这也是为什么 vue 的 router.push 方法只能在支持 history.pushState() 方法的浏览器中使用，当调用 router.go() 或者 router.back() 方法的时候就和 history.go()、history.back() 效果一样，都是对 history 栈中的记录进行访问，上述行为与通过浏览器的回退和前进效果也是一样。
但是，在不加处理的情况下，组件的滚动行为会跟我们想象的不同。

现在随便配置几个路由跳转在这里插入图片描述
这是头部的导航，我在底部也配置了一样的跳转

当我滚动到底部时，点击底部的路由跳转，发现跳转到的页面也是在底部？？？
如何解决！
我这里使用的是scrollBehavior去解决的
首先在 router目录下的index.js文件中配置:

const scrollBehavior = function(to, from, savedPosition) {
    // savedPosition 会在你使用浏览器前进或后退按钮时候生效
    // 这个跟你使用 router.go() 或 router.back() 效果一致
    // 这也是为什么我在 tab 栏结构中放入了一个 点击回退 的按钮
    if (savedPosition) {
        return savedPosition
    } else {
        // 如果不是通过上述行为切换组件，就会让页面回到顶部
        return { x: 0, y: 0 }
    }
}

然后挂载

const router = new VueRouter({
    mode: 'history',
    scrollBehavior,
    base: process.env.BASE_URL,
    routes
})

整体如下
在这里插入图片描述