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

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> 上与 a 组件相关的 router-link-active-class，即使我仍然处于 /.

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

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

然而，当我点击 link 到 /b 或 /c 时，vue 不会再次删除 class。你们中的任何人都可以在正确的方向上提示我吗？

Answer 1

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

它阻止主动 class 包容性匹配行为。

Answer 2

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

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

中并不存在。

我的解决方案：添加一个事件侦听器，它会随着 class 一起删除，一旦在 #drawerMenu 中单击另一个 link：

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 3

您可以像这样手动绑定 class 到路由器-link

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

Answer 4

最好的解决方案是在根 url

中使用 "exact"

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

Answer 5

在我的例子中，我有一个用例，当以下其中一项为真时，我需要激活 class：

/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>

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

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

Answer 6

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

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

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

Vue.js: Add router-link-active to vue-router component loaded for root

javascript

vue.js

vue-router