Vue-router 如何回到首页的特定部分？答案

【问题标题】：Vue-router How to come back to a specific section of the home page?Vue-router 如何回到首页的特定部分？
【发布时间】：2018-02-06 18:28:41
【问题描述】：

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

从路由器调用的所有页面都有一个导航栏 menu-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>

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

有什么技巧吗？感谢反馈

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

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

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

特别是异步滚动部分之前的代码

【讨论】：

@mohd-ph 感谢您的反馈。我阅读了有关滚动行为的这一章，我在主页的多个部分中使用它来管理#routing（获取 to 参数中的所有信息）。但是在我的情况下，我从另一个页面（不在主页内）调用路由器，因此根本不执行 scrollBehavior...
让它运行 .. .. 更新了我的 scrollBehavior 非常感谢

【解决方案2】：

更新了我的路由器 index.js 中的滚动行为

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

【讨论】：

【解决方案3】：

我遇到了同样的问题，你可以试试这个方法

在路由器js文件中

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

【讨论】：