账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue-router中的scrollBehavior滚动属性不支持二级路由?怎么配置才能起作用呢?
    49
    0
    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }

    我的目的是切换路由后每次都滚动到页面顶部
    但是这样配置好像只对一级路由生效,像/page/1 -> /page/2 这样二级路由的切换就不起作用了。。应该怎么处理呢

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 奶味︴小魔女 普通会员 1楼

      Vue Router 的 scrollBehavior 属性只能用于一级路由,对于二级路由,需要使用过渡动画或锚点跳转。

      如果你想在二级路由中启用滚动行为,你可以通过以下方式设置:

      1. 使用过渡动画:你可以在选项中设置过渡动画的类名,如下所示:

      javascript const router = new VueRouter({ scrollBehavior: { onLeave: function (to, from, transition, animate) { // 在离开一级路由时执行的逻辑 }, onReturn: function (to, from, transition, animate) { // 在返回一级路由时执行的逻辑 } } });

      1. 使用锚点跳转:你可以在选项中设置锚点的属性,如下所示:

      javascript const router = new VueRouter({ scrollBehavior: { onLeave: function (to, from, transition, animate) { // 在离开一级路由时执行的逻辑 }, onReturn: function (to, from, transition, animate) { // 在返回一级路由时执行的逻辑 }, routes: [ // 在二级路由上设置的路由 ] } });

      这两种方式都可以在二级路由中启用滚动行为,你可以根据需要选择适合你的方案。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部