时间戳

首页 > 解决方案 > 使用 Vue 路由器的哈希

javascript - 使用 Vue 路由器的哈希

问题描述

我有一个包含多个锚标签的页面：

<a name="my-link"></a>

然后，我尝试在页面右侧生成指向这些位置的链接，如下所示：

<li v-for="(item, index) in items" :key="index">
  <router-link :to="{hash:item.hash}">{{item.text}}</router-link>
</li>

但是，每当我这样做时，单击链接都会将我带到页面顶部。我确实有这样的代码，它确实有效：

<li v-for="(item, index) in items" :key="index">
  <a href="{hash:item.hash}">{{item.text}}</a>
</li>

两种方式，当重新加载页面或单击从上述两个模板生成的链接时，都不会突出显示主要的顶部导航栏项目。我正在使用这个 CSS：

nav.top > ul > li > a:hover,
nav.top > ul > li > a.router-link-exact-active.router-link-active {
  background: #ee2012;
}

/my-route#my-hash使用 vue 和 vue 路由器集成哈希的正确方法是什么？

标签： javascripthtmlvue.jsvue-router

解决方案

推荐阅读