search

AT-UI / at-ui

A fresh and flat UI-Kit specially for desktop application, made with ♥ by Vue.js 2.0 (DEPRECATED)
https://at.aotu.io
MIT License
2.34k stars 230 forks source link

Menu - vue-router integration is buggy #99

Open mrin9 opened 6 years ago

mrin9 commented 6 years ago

Steps to reproduce

  1. Set up vue-router with few navigations
  2. Create a Menu few menu-items (provide router paths in to prop)
  3. Select an menu-item by clicking, which will make it active (blue vertical bar on side)
  4. Now type a different path on the browser's url, this will make the other associated item active in the menu, but will not remove the previously selected item (now I have a menu showing two items selected)

I checked the sidebar in the documentation site which is working perfectly with router, I initially thought it is <at-menu> component , but looks like it is not

Which browser?

All

What is expected?

upon typing a valid path, on browser's url, The menu must remove the previous selected item

What is actually happening?

The previous selected item is not removed

Reproduction Link

Sorry cant create a reproduction link as the use case is tied to browser's url.

dsevillamartin commented 6 years ago

I got this bug as well, and for me it seems that AT UI is not only checking for exact route paths, but also similar (like starting with, etc...).

Here's the classes on my Home menu item pointing to /: image

Here are the classes for the same element when I click on another item and the path changes: image

The router-link-exact-active class is dropped, but router-link-active remains, which led be to the conclusion illustrated at the beginning of this comment.

This is a nice feature, however there should be an option to disable it when needed, which usually includes the home (/) path.

UPDATE: router-link-exact-active is provided by vue-router (see https://router.vuejs.org/api/#exact-active-class), so the logic AT UI uses is definitely faulty here, whatever it's supposed to be doing.

SeedyROM commented 5 years ago

@datitisev Currently dealing with this bug, I tried solving at the AtMenuItem component level. No luck, I'll keep everyone posted and create a PR when done.

The styling also seems to be causing the issue, not the logic itself from what I can see. I went through and completely modified the AtMenuItem to have an exact prop, the styling for active turns on regardless of if the item actually is.

Update: I thought I found the issue, no luck.

SeedyROM commented 5 years ago

See PR https://github.com/AT-UI/at-ui/pull/143/, this might solve your issue. Still in development.