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

Question

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

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

一切正常...

但我希望能够从此页面返回到主页的特定ci部分；..

我尝试使用：

              <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：

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.

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

Answer 2

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

  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 如何返回到主页的特定部分？

Vue-router How to come back to a specific section of the home page?

vue.js

vue-router