zoukankan      html  css  js  c++  java
  • 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代码进行滚动条的顶部返回

  • 相关阅读:
    flyway
    xxl-job
    响应式布局
    position: fixed
    position: absolute
    position: relative
    GDB高级一点的命令
    坑爹的大页内存
    input8按键对照
    discuz插件应用原理分析
  • 原文地址:https://www.cnblogs.com/DemoLee/p/6964959.html
Copyright © 2011-2022 走看看