Vue.js：将 router-link-active 添加到为 root 加载的 vue-router 组件

Question

我在使用 vue-router 时遇到了一些麻烦。我的路线是这样设置的：

const routes = [
    { path: '/', component: a },
    { path: '/a', component: a },
    { path: '/b', component: b },
    { path: '/c', component: c }
]

如您所见，我想a在页面加载时加载组件。但我不希望 URL/a在页面加载时更改为。但是我想触发与组件相关的router-link-active-class ，即使我仍然在.<router-link>a/

我尝试过一些简单的 JS，例如：

if(window.location.hash === '#/') {
    var el = document.querySelector('#drawerList').firstElementChild;
    el.className += 'router-link-active';
}

但是，当我单击/b或的链接时，vue 不会再次删除该类/c。你们中的任何人都可以向我暗示正确的方向吗？

Answer 1

您可以像这样手动将类绑定到路由器链接

<router-link :class="{'router-link-active': $route.fullPath ==='/' || $route.fullPath === '/a'}" to="/a"></router-link>

Answer 2

最好的解决方案是在根 url 中使用“精确”

<router-link to="/" tag="a" exact>Home</router-link>