Nuxt跨页面跳转指定区块时链接格式异常问题求助

问题分析 #

你的需求是让子链接指向/foo/#bar，但当前代码生成的链接是/foo#bar，核心原因是当路由path为/foo（末尾无斜杠）时，Nuxt会直接将hash拼接到path后，不会自动添加斜杠。

解决方案 #

方案1：确保path末尾带斜杠 #

如果item.url的值是/foo，修改为/foo/，结合hash参数后，Nuxt会自动生成/foo/#bar：

<nuxt-link :to="{ path: item.url, hash: link.Url }" class="dropdown-item">
  {{ link.Text }}
</nuxt-link>

注：假设link.Url的值是#bar，如果是bar，需要调整为#${link.Url}

方案2：动态拼接path（不修改原数据） #

如果无法修改item.url的原始值，通过字符串拼接给path加上末尾斜杠：

<nuxt-link :to="{ path: `${item.url}/`, hash: link.Url }" class="dropdown-item">
  {{ link.Text }}
</nuxt-link>

若link.Url不带#前缀，补充前缀即可：

<nuxt-link :to="{ path: `${item.url}/`, hash: `#${link.Url}` }" class="dropdown-item">
  {{ link.Text }}
</nuxt-link>

方案3：直接拼接完整路径 #

如果路由结构简单，也可以直接拼接完整URL字符串，兼容link.Url带/不带#的情况：

<nuxt-link :to="`${item.url}/#${link.Url.replace('#', '')}`" class="dropdown-item">
  {{ link.Text }}
</nuxt-link>

内容的提问来源于stack exchange，提问作者Paul Carlson