vue-router踩坑之history模式的scrollBehavior

  vue-router默认模式是hash,该模式下微信和部分浏览器不会保留页面的滚动位置，例如从列表页到详情页，再返回列表页，会自动回到列表页顶部，显然很多情况下这并不是我们想要的，希望回到的是原来浏览到的位置；history模式下有 new Router({

  mode: 'history',

  scrollBehavior (to, from, savedPosition) {

    // return 期望滚动到哪个的位置

    if (savedPosition) {

      return savedPosition

    }

    else {

      return { x: 0, y: 0 }

    }
  },

  可以实现保留浏览位置的效果

  过程中用了传统的直接改location.href,但该模式下，若页面中有通过js直接改locaion.href的情况，则会出现那个页面一直在类似刷新的状况。

  解决：通过this.$router.push()的方式来改变url以及url中的参数

  微信与浏览器差异：

     js中写windows.open()和直接用a标签微信中效果不一样：：window.open()效果是调到页面，让用户选择复制链接地址，而a标签是直接在当前页面打开

  但是，npm run build时遇到问题：index.html打开后一片空白，也没任何报错，原因：

     https://router.vuejs.org/zh-cn/essentials/history-mode.html       webpack 打包vue-router为history 打开空白没报错

    去掉history模式，打包后传到服务器发现可以保留列表原来停留的地方。。。。。

    测试发现：

         scrollBehavior (to, from, savedPosition) {

  // return 期望滚动到哪个的位置

  if (savedPosition) {

    // alert(savedPosition.y);

    return savedPosition

  }

  else {

    return { x: 0, y: 0 }

  }

},

这段代码在history模式下也是有记录原来停留位置的功能 的，如果注释掉该段代码，就会不能回到原来浏览的位置。

实际情况如此，但官网说是只有在historym模式下