Question

我有一个主页，其中包含许多部分，用户可以通过滚动或从导航栏菜单-1访问。在此菜单中还有一个“加号”按钮，用于从路由器请求其他页面

从路由器调用的所有页面都有一个导航栏菜单-2，用于从路由器调用其他页面或返回主页

工作正常......

但我希望能够从这些页面返回到主页的特定部分; ..

我试图使用：

              <div class="navbar-text">
              <!-- Button trigger modal-->
              <div class="dropdown">
                  <button class="dropbtn">PLUS...</button>
                  <div class="dropdown-content">
                      <a @click="$router.push('/home#about-us')">ABOUT US</a>
                      <a @click="$router.push('/home#memberships')">MEMBERSHIPS</a>
                      <a @click="$router.push('/hoem#events')">EVENTS</a>
                      <a @click="$router.push('/home#portfolio')">PORTFOLIO</a>
                      <a @click="$router.push('/home#leaders')">LEADERS</a>
                      <a @click="$router.push('/home#contact')">CONTACT</a>
                  </div>
              </div>
          </div>

但没办法..我总是回到主页的顶部......

任何诡计？感谢您的反馈

Answer 1

从文档中查看Vue Router - Scroll Behavior：

使用客户端路由时，我们可能希望在导航到新路由时滚动到顶部，或者保留历史条目的滚动位置，就像实际页面重新加载一样。 vue-router允许您实现这些甚至更好，允许您完全自定义路线导航中的滚动行为。

特别是Async Scrolling部分之前的代码

Answer 2

更新了路由器index.js中的scrollBehavior

  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      return {selector: to.hash}
    } else if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }

Answer 3

我遇到了同样的问题，您可以尝试这种方式

在路由器js文件中

scrollBehavior(to: any, from: any, savedPosition: any) {
    return new Promise((resolve: any, reject: any) => {
      setTimeout(() => {
        resolve({ x: 0, y: 0 });
      }, 480);
    });
  }

Vue-router如何回到主页的特定部分？

3 个答案: