Vuetify（Vue + Laravel）路由器推送后未设置导航栏活动链接

Posted 2023-02-16

【中文标题】Vuetify（Vue + Laravel）路由器推送后未设置导航栏活动链接

【英文标题】：Vuetify (Vue + Laravel) Navigation bar active link is not set after a router push

【发布时间】：2021-10-29 01:50:46

【问题描述】：

我有一个非常简单的问题，但我无法解决。我使用了带有 v-list-item-group 的 导航抽屉，并且导航功能正常。就在我使用 router-link 或 this.$router.push() 时，活动链接不会改变并停留在之前的站点。

例如。当当前站点是主页并且从那里指向文档的链接不会重新呈现 documentations 选项卡的活动链接并停留在 home 上。如果我直接在导航栏中单击它，则活动链接设置得很好。

我尝试了以下方法：

methods:
this.$router.push(
   name: "documentations",
   params:  id: user_id
);

methods:
this.$router.replace(
   name: "documentations",
   params:  id: user_id
);

模板中的路由器链接，带有选项exact 和exact-path：

<router-link :to=" name: 'documentations', params:  userId: item.id">

有人遇到过类似的问题吗？我是否监督了一些重要的事情？

【参考方案1】：

带有 v-list-item-group

v-list-item-group 不应该与导航一起使用，它是用于制作这样的可选列表：

如果你只使用v-list + v-list-item 它应该可以工作。

【讨论】：

很奇怪，我从导航栏文档 (vuetifyjs.com/en/components/navigation-drawers/#examples) 中获取了示例，它是使用 v-list-item-group 构建的。我从来没有想过这是麻烦制造者。我现在删除了 item-group 并在每个 router-link 上设置了 active-class 选项。现在它工作得很好。非常感谢！