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

【问题标题】：Vue.js: Add router-link-active to vue-router component loaded for rootVue.js：将 router-link-active 添加到为 root 加载的 vue-router 组件
【发布时间】：2017-08-19 04:44:42
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

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

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

【讨论】：

哇，这真是太棒了，而且完美无瑕。谢谢！
最好、最干净的答案仍然存在，谢谢！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

它可以防止活动类包含匹配行为。

【讨论】：

我查看了exact，但它没有按预期工作。不过谢谢！

【解决方案4】：

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

我最终做了一些定制的事情，而不是寻求本地解决方案。在 GitHub 上查看了一些问题后，我意识到像这样的东西，虽然很愚蠢 - 我承认，在 Vue.js 中并不存在。

我的解决方案：添加一个事件监听器，该事件监听器会随着类一起删除，一旦在#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 中。

【讨论】：

【解决方案5】：

在我的例子中，只要满足以下条件之一，我就需要一个活动类：

/users
/users/1/edit
/users/1/view

在主app.vue 中使用vuejs 3 我已经定义了路由。然后将路由参数注入到sidemenu component（这在本示例中并不重要）

app.vue 依赖项

import { ref, watch } from "vue";
import { useRoute } from "vue-router";

setup() 方法（使用composition API）：

setup() {
const route = useRoute();

const myActiveClass = ref(null);

const checkIfMustActivateRoute = () => {
  return {
    active:
      window.location.pathname.startsWith("/users/view/") ||
      window.location.pathname.startsWith("/users/edit/"),
  };
};

watch(
  () => route.fullPath,
  async (_) => {
    myActiveClass.value = checkIfMustActivateRoute();
  }
);

myActiveClass.value = checkIfMustActivateRoute();

const routes = ref([
  { id: 0, name: "Home", href: "/", icon: "fas fa-home" },
  {
    id: 1,
    name: "Users",
    href: "/users",
    icon: "far fa-clone",
    class: myActiveClass,
  },
]);

return {
  routes,
};
},

NavLinks 是这样动态生成的：

  <li v-for="tab of routes" :key="tab.id" class="nav-item">
    <router-link :to="tab.href" class="nav-link" :class="tab.class">
      <div class="align-items-center">
        <span class="nav-link-icon"><i :class="tab.icon"></i></span>
        <span class="nav-link-text ms-3">{{ tab.name }}</span>
      </div>
    </router-link>
  </li>

现在，每当路由器的路径属性发生变化时，我都会触发活动类更新功能。这样我们就不必使用别名或任何其他技巧。

结果是 - 对于所有 3 条路径，我总是启用 active 类。

【讨论】：

【解决方案6】：

可以在您的路由器链接元素上使用exact-active-class。
注意：desiredClass 是您要应用的类，如果 URL 与路由器链接的 to 属性匹配。

<router-link to="/about" exact-active-class="desiredClass">About</router-link>

【讨论】：