Nuxt单页应用程序中的脚本不起作用

Question

我有一个Nuxt.js项目，我想在项目的所有页面中执行此代码(它用于在菜单中的页面上加下划线(：

if (window.location.pathname == "/") {
actualPage = document.querySelector(".accueil");
actualPage.removeAttribute("id");
actualPage.setAttribute("id", "active");
}
if (window.location.pathname == "/tous-les-articles") {
actualPage = document.querySelector(".tous-les-articles");
actualPage.removeAttribute("id");
actualPage.setAttribute("id", "active");
}
if (window.location.pathname == "/sciences") {
actualPage = document.querySelector(".sciences");
actualPage.removeAttribute("id");
actualPage.setAttribute("id", "active");
}
if (window.location.pathname == "/actualites") {
actualPage = document.querySelector(".actualites");
actualPage.removeAttribute("id");
actualPage.setAttribute("id", "active");
}
if (window.location.pathname == "/histoire") {
actualPage = document.querySelector(".histoire");
actualPage.removeAttribute("id");
actualPage.setAttribute("id", "active");
}
if (window.location.pathname == "/livres") {
actualPage = document.querySelector(".livres");
actualPage.removeAttribute("id");
actualPage.setAttribute("id", "active");
}
if (window.location.pathname == "/le-saviez-vous") {
actualPage = document.querySelector(".le-saviez-vous");
actualPage.removeAttribute("id");
actualPage.setAttribute("id", "active");
}

当我直接转到页面时，它就起作用了。

但问题是，当我用菜单导航到另一个页面时，它不起作用。我的项目在单页应用程序中。

我已经尝试在环球创建一个新项目，但效果不太好。

Answer 1

不用javascript获取当前的路由名称&添加css，当你使用nuxt-js时，你可以使用vue$route.path来获得你当前的路由名称&有条件地将css添加到菜单中。

<template>
<NuxtLink to="/tous-les-articles" 
:class="$route.path.toLowerCase().includes('tous-les-articles')
? 'active'
: ''
">
Nuxt website
</NuxtLink>
</template>

其他方式可以显示到项目导航栏的活动链接。有关详细信息，您可以查看此文档&在沙盒上播放：https://nuxtjs.org/examples/routing/active-link-classes/