Question

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

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

如您所见，我想在页面加载时加载组件a。但是，我不希望在页面加载时将网址更改为/a。不过，我想触发与router-link-active组件相关的<router-link>上的a - 类，即使我还在/。

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

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

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

Answer 1

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

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

Answer 2

最好的解决方案是使用＆＃34;确切＆＃34;在根网址

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

Answer 3

尝试<router-link to="/" exact>

它会阻止活动类包含匹配行为。

Answer 4

这是我的预答案 - 请参阅解决方案。

我最终做了一些自定义的事情，而不是寻求原生解决方案。在看了GitHub上的一些问题之后，我意识到像这样的东西，因为它是愚蠢的 - 我承认，在Vue.js本身并不存在。

我的解决方案：添加一个eventlistener，在#drawerMenu点击另一个链接时将其与类一起删除：

HTML结构：

<ul id="drawerMenu">
  <li>
    <router-link to="/a">A</router-link>
  </li>
  <li>
    <router-link to="/b">B</router-link>
  </li>
  <li>
    <router-link to="/c">C</router-link>
  </li>
</ul>

JS：

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

    var removeRouterClass = function () {
        el.classList.remove('router-link-active');
        menu.removeEventListener('click', removeRouterClass);
    }

    menu.addEventListener('click', removeRouterClass);
}

我希望这能帮助像我这样的人，希望这会在某些时候本地融入Vue。

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

4 个答案: