在 Vue-Router 中使用 HeadlessUI 菜单

【问题标题】：Using HeadlessUI Menu with Vue-Router在 Vue-Router 中使用 HeadlessUI 菜单
【发布时间】：2022-12-16 03:08:47
【问题描述】：

我正在尝试将 HealdessUI 菜单组件与 vue-router 一起使用。我可以找到一种方法来完成这项工作。看来，HeadlessUI 只能与 Links 一起使用。但我需要使用类似this.$router.push({ name: item.href, hash: item.hash } 的东西。

我的路线已命名，但我需要给它一个散列，所以它实际上滚动到网站上的锚点 ID。

【问题讨论】：

标签： vuejs3 vue-router tailwind-css headless-ui

【解决方案1】：

router.push(...) 用于编程导航，但也有 <router-link> 用于 declarative navigation，您可以将其放入组件的模板代码中：

<MenuItem v-slot="{ active }">
  <router-link to="{ path: '/', hash: '#about' }">About</router-link>
</MenuItem>

可以通过在路由器文件中设置 scrollBehavior 来启用锚链接：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
      }
    }
  }
})

【讨论】：