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 。 但是，我想在与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 不会再次删除该类。 你们中的任何人都可以向我暗示正确的方向吗？

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>

Answer 3

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

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

Answer 4

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

我最终做了一些定制的工作，而不是寻求本机解决方案。 在查看了GitHub上的一些问题之后，我意识到类似这样的东西-尽管我很愚蠢-我承认，Vue.js本身并不存在。

我的解决方案：在#drawerMenu单击另一个链接后，添加一个#drawerMenu ，该#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中。

Answer 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,
};
},

NavLink是动态生成的，如下所示：

  <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类。

Answer 6

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

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