现在,在我的Vue应用程序中,当我单击<router-link>时,它会转到页面,但与上一页的滚动级别相同(因为链接只是替换组件).

我想知道是否有一个vue-router功能可以让页面达到顶部,或者我需要使用其他一些JS编程来实现这一点.

谢谢你的帮助.

推荐答案

Vue路由有几个防护和功能,在路由更改之前、期间和之后调用.默认情况下,你的滚动行为是scrollBehavior.它由两个route objects和一个包含x和y坐标的对象调用,可能还有一个 Select 器, Select 页面上的一个元素作为偏移.

要使用它,请更改定义路由的代码并添加scrollBehavior功能:

// src/router.js
const router = new VueRouter({
  // What you previously had here, such as routes

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

export default router;

Vue.js相关问答推荐

Pinia+Vue 3状态react 性-StoreToRef的替代方案

将 html 文件移出 dist vite 中的 src 文件夹

Vue 3使用计算(computed)属性对象获取图像信息,在模板中呈现值时变为NaN

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

如何 for each 用户分组聊天消息?

使用 Vue Js 运行 Jest 测试时出现语法错误:无法在模块外使用 import 语句

如何使用 vue-resource 添加额外的标头来发布请求?

Vue.js:从 parent父Vue 获取数据

NUXT如何将数据从页面传递到布局

如何在 Vuex 中获取 Vue 路由参数?

为 Vue 组件动态添加属性

使用props向组件添加类名

如何告诉 Vue-cli 我的应用程序的入口点在哪里?

样式化 Vue 插槽

emit更新数组不起作用

如何在 NuxtJS 中设置全局 $axios 标头

在vue中单击时如何模糊元素

在 VueJS 中使用 Axios - 这个未定义

使用 svelte js 的原因

Vue.js 显示空格(换行符)