vuejs3 - Vue 3：如何在没有路由器的情况下在当前页面链接上设置活动类？

Question

我试图弄清楚如何在不使用路由器或 cli 的情况下在页面加载时突出显示 Vue 3 中的当前页面链接。

我的组件如下所示：

export default {
    name: 'Navbar',
    template: 
        '<nav class="navbar">
            <a href="index.html">Home</a>
            <a href="myotherpage.html">My other page</a>
        </nav>'
}

我正在考虑创建某种方法来检测页面链接并将其添加到所有链接中，如下所示：

<a :class="{ active: determineIfLink(someEventUsingHrefsomehow) }" href="index.html">Home</a>
<a :class="{ active: determineIfLink(someEventUsingHrefsomehow) }" href="otherpage.html">Other Page</a>

或像这样：

<a @onload(which doesn't seem to exist)="makeThisOneActive" href="index.html">Home</a>
<a @onload(which doesn't seem to exist)="makeThisOneActive" href="otherpage.html">Other Page</a>

但不确定如何实现直接在 HTML 上运行的功能。

我看到很多人建议“使用安装！” 在其他页面上，但是当您想在标签本身上运行该功能时呢？

标签： vuejs3