• vue-router scrollBehavior无效的问题


      在使用vue做单页面应用开发时候 使用vue-router作为路由控制器  在使用过程中发现每个页面打开都在原来的位置 不能返回到页面顶部位置 ,然后查看api文档

      滚动行为  发现如下代码:

      

    const router = new VueRouter({
      routes: [...],
      scrollBehavior (to, from, savedPosition) {
        // return 期望滚动到哪个的位置
        scrollBehavior (to, from, savedPosition) {
          if (savedPosition) {
               return savedPosition
          } else {
          return { x: 0, y: 0 }
       }
     }
      }
    })    

      添加路由中后发现没有实际效果。。。

      

      再细查资料发现作者在issues中说了

      Hooking into transitions involves too many intricacies and depends on custom transition implementations, so vue-router is not going to support that as a built-in. It's possible to implement your own transition component for that purpose though.

      意思是vue-router不在支持这个特性了

      解决方式:  

    router.beforeEach((to, from, next) => {
    document.body.scrollTop = 0;
    next()
    });

      在路由遍历中使用js代码进行滚动条的顶部返回

  • 相关阅读:
    物理机连接虚拟机中的sqlserver
    Vue.js
    拆分时间段
    System.Threading.Timer
    浏览器被恶心页面占用
    sqlserver超时时间已到
    几年没写CSS
    C#生成高清缩略图
    抽奖概率算法
    html 页面实现指定位置的跳转
  • 原文地址:https://www.cnblogs.com/DemoLee/p/6964959.html
Copyright © 2020-2023  润新知