Question

我使用vue-router在Vue项目上设置了非常基本的路由。

router-link-active classname按预期应用于活动根目录。在下面的gif中，当/foo处于活动状态时，这将是'Foo'等。

但是，“Hello world”链接也有router-link-active类名。

为什么它会被应用？如何确保它仅在我/（localhost:8080）时才有效？

Answer 1

将exact道具放到"/"路线

默认的活动类匹配行为是包含匹配。对于   例如，只要应用此类就可以了   当前路径以/ a。
开头
这样做的一个结果是有效   对于每条路线！要强制链接进入“完全匹配模式”，请使用   确切的道具：

<!-- this link will only be active at / -->
    <router-link to="/" exact>

以下是您的需求：jsFiddle