Question

可以在this jsfiddle中找到代码段，抱歉在外部发布代码，当我点击导航链接时，stackoverflow代码块始终返回Server Error in '/' Application。

重现我的问题的步骤：

点击Foo
点击Foo-3
向上滚动
重复步骤2

预期的行为是向下滚动到Foo-3，就像第一次一样，但它实际上保持在同一位置，并且不会滚动到Foo-3。

如果我先单击Foo-3并向上滚动并在这种情况下再次单击Foo-3，如何强制它滚动到Foo-3？

提前致谢。

编辑：由于stackoverflow中的路径错误，代码段在stackoverflow中无效，请参阅我发布的js小提琴链接。我没有创建这个代码，但我在这里遇到了完全相同的问题。我没有在Github上找到解决方案，所以我来这里寻求帮助。如果有任何问题，请大声喊出来。

Code credit

Original question in Github

＆＃13;

var FooComponent = {
  template: '#foo-template'
};
var routes = [{
  path: '/foo',
  component: FooComponent
}];
var scrollBehavior = function(to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  } else {
    return {
      x: 0,
      y: 0
    }
  }
};
var router = new VueRouter({
  routes: routes,
  scrollBehavior: scrollBehavior,
  mode: 'history'
});
var app = new Vue({
  el: '#app-root',
  router: router
});

＆＃13;

<div id="app-root">
  <h1>Issue Reproduction</h1>
  <router-link to="/foo">Foo</router-link>
  <h2>Nav</h2>
  <router-view></router-view>
</div>
<script type="text/x-template" id="foo-template">
  <section>
    <router-link :to="{path: '/foo', hash: 'foo-1'}">Foo-1</router-link>
    <router-link :to="{path: '/foo', hash: 'foo-2'}">Foo-2</router-link>
    <router-link :to="{path: '/foo', hash: 'foo-3'}">Foo-3</router-link>
    <h2 id="foo-1">Foo-1</h2>
    <p>???</p>
    <p>???</p>
    <p>???</p>
    <p>???</p>
    <p>???</p>
    <h2 id="foo-2">Foo-2</h2>
    <p>???</p>
    <p>???</p>
    <p>???</p>
    <p>???</p>
    <p>???</p>
    <h2 id="foo-3">Foo-3</h2>
    <p>???</p>
    <p>???</p>
    <p>???</p>
    <p>???</p>
    <p>???</p>
  </section>
</script>

＆＃13;

Answer 1

使用片段标识符时很常见，不仅限于Vue.js。您可以通过更改哈希来解决此问题。这里的a simple demo将不会重现该问题。

在演示中，我添加了一个侦听器，以侦听滚动事件，并让基于最后一个元素的哈希更改通过。

我希望它能给您提示。

var FooComponent = {
  template: '#foo-template',
  mounted() {
    const switchHash = () => {
     Array.from(document.querySelectorAll('h2')).forEach(h2 => {
       if(h2.offsetTop < window.pageYOffset && h2.offsetTop + h2.clientHeight > window.pageYOffset) {
         window.location.hash = h2.id;
       }
     });
    };
    window.addEventListener('scroll', switchHash);
  }
};

Vue路由器导航到同一路由失败

1 个答案: