Javascript 如何在Vuejs中创建一条路由，使其不仅可以到达页面，还可以到达特定元素？

下面是我的导航栏。目前该应用程序有两个页面。主页有标题部分、产品部分和联系人部分，而图库页面只有图像

当前，当我加载页面时，它会将我带到主页，当我单击导航栏上的gallery时，它会将我带到gallery的另一个页面。当我在gallery页面上单击我们的客户时，它会将我带到主页。我希望它不仅带我到主页，而且带我到id客户端的元素。我怎样才能做到这一点

<ul class="navbar-nav">
    <li class="nav-item">
        <router-link to="/" class="nav-link" id="products">Products & Services</router-link>
    </li>
    
    <li class="nav-item">
        <router-link to="/"  class="nav-link" id="clients">Our Clients</router-link>
     </li>

    <li class="nav-item">
        <router-link to="/gallery"  class="nav-link">Gallery</router-link>
    </li>
</ul>

---

将哈希添加到链接：

<li class="nav-item">
    <router-link to="/#clients"  class="nav-link" id="clientsLink">Our Clients</router-link>
</li>

<li class="nav-item">
    <router-link to="/#clients"  class="nav-link" id="clientsLink">Our Clients</router-link>
</li>

new VueRouter({
    mode: 'history',
    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return {selector: to.hash}
        } else {
            return { x: 0, y: 0 }
        }
    },
    routes: [
          {path:'/', component: HomePageComponent},

        {path:'/gallery', component: GalleryComponent}
    ]
});