`router-link-active` classname意外地应用于指向`/`的<router-link>

Question

我已经使用Vue项目设置了非常基本的路由vue-router.

的router-link-active类名作为预期到有源根被施加.在下面的gif中,当/foo活动时会出现'Foo' 等.

但是,"Hello world"的链接也有router-link-activeclassname.

为什么它会被应用,我怎样才能确保它只在我/(localhost:8080)时才有效？

Answer 1

把exact道具放在你的"/"路线上

默认的活动类匹配行为是包含匹配.例如,只要当前路径以/ a开头,就会应用此类.

这样做的一个结果是每条路线都会激活!要强制链接进入"完全匹配模式",请使用确切的道具:

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

这就是你需要的:jsFiddle