问题描述
我正在使用 vuesax 侧边栏组件，但不知道如何更新计算属性 getActive
我在 vue spa 中的 laravel 5.7 和活动类（如果由计算属性专用），并且当您单击每个链接时它会发生变化，但不会根据您所在的页面发生变化。 我尝试使用 vue 路由器链接并使用用于路由器链接的 class-active 属性手动设置类
<vs-sidebar-item to="/dashboard" index="1" icon="menu">
Dashboard
</vs-sidebar-item>
<vs-sidebar-item to="/orders" index="2" icon="all_inbox" >
Orders
</vs-sidebar-item>
现在，如果您单击相应链接，它将更改活动属性，但如果您要转到 url 栏并以这种方式更改您的页面，它将不会反映在导航栏中。
1楼
我通过向 Vue Router 中的afterEach函数添加一些自定义逻辑来解决这个afterEach 。
router.afterEach((to,from) => {
// Clear all buttons
const btns = document.querySelectorAll('.vs-sidebar-item-active');
btns.forEach( el => {
el.classList.remove('vs-sidebar-item-active')
});
// Highlight correct button
var item = document.querySelector("div.page-" + to.name);
if (item) {
item.classList.add('vs-sidebar-item-active');
}
});
您需要将适当的类名添加到vs-sidebar-item s。
这里我有page-***类来匹配路线的名称。