vue项目中,滚动条恢复初始位置的方法
    一、使用Vue-router滚动行为：
    你可以使用Vue-router的滚动行为，让每个路由的滚动条恢复到初始位置。
    1、在 router/index.js中添加以下代码：
    const router = new VueRouter({
    mode: 'history',
    scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
    },
    routes
    })
    /*
    mode: 'history', 将路由设置为HTML5 History 模式
    scrollBehavior (to, from, savedPosition)定义滚动行为，返回需要滚动到的位置对象
    { x: 0, y: 0 }表示滚动到顶部，如果想滚动到指定的位置，你可以返回{ x: 0, y: 100 }，这是表示滚动到 100 像素高度
    */
    2、引入组件，在组件中定义 mounted 事件：
    mounted() {
    this.$nextTick(() => {
    window.scrollTo(0, 0);
    });
    }
    /*
    this.$nextTick表示当组件被挂载完成之后，才会触发函数，window.scrollTo用来将滚动条恢复到初始位置，设置 x 为 0，y 为 0 则表示滚动条恢复到顶部，其他位置同理。
    */
    二、使用 JavaScript 的 scrollTo 方法：
    使用 JavaScript 的 scrollTo 方法，可以在切换到某个页面的时候让滚动条恢复到初始位置。
    1、在 router/index.js 中添加以下代码：
    routes: [
    {
    path: '/',
    component: Home,
    beforeEnter: (to, from, next) => {
    window.scrollTo(0, 0);
    next();
    }
    }
如何设置滚动条的位置    ]
    /*
    在 beforeEnter 中调用 window.scrollTo 方法将滚动条恢复到初始位置，当 beforeEnter 函数执行完毕之后才会跳转到目标路由
    */
    2、在组件中定义 mounted 事件：
    mounted() {
    this.$nextTick(() => {
    window.scrollTo(0, 0);
    });
    }
    /*
    this.$nextTick表示当组件被挂载完成之后，才会触发函数，window.scrollTo用来将滚动条恢复到初始位置，设置 x 为 0，y 为 0 则表示滚动条恢复到顶部，其他位置同理。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。