Ability to use Vue Router router-link component in menus

[djmattyg007]

Menu items should have the option of creating router-link components to support native routing functionality provided by Vue Router. This should also ensure actual <a> tags are generated, so as to be more friendly to accessibility.

[07akioni]

The demand does exist. The API should be designed carefully. I need to think it for some time.

[07akioni]

ref https://www.naiveui.com/en-US/os-theme/components/menu#select

[djmattyg007]

Would you consider updating the menus on the documentation site to use this? The current way of how it handles navigation means I can't middle-click the links to open them in new tabs, which is very frustrating.

[djmattyg007]

I definitely appreciate the flexibility of this approach, but it would be nice to have a slightly nicer way of handling the common use case of a <router-link> with route props. This will end up being very verbose for longer menus.

[07akioni]

Would you consider updating the menus on the documentation site to use this? The current way of how it handles navigation means I can't middle-click the links to open them in new tabs, which is very frustrating.

You can click

And a new tab will be opened.

[07akioni]

I definitely appreciate the flexibility of this approach, but it would be nice to have a slightly nicer way of handling the common use case of a <router-link> with route props. This will end up being very verbose for longer menus.

I can understand your concern. I'm not going to add props directly relevent to router-link since it will make option verbose.

Instead I think it's possible to create a render-label prop for menu if you want to create a longer menu will duplicate logic.

[djmattyg007]

I meant the main navigation links on the docs site:

I can't middle click these, nor can I see where they will take me by hovering over them. This is because they are not regular links.

[07akioni]

I meant the main navigation links on the docs site:

I can't middle click these, nor can I see where they will take me by hovering over them. This is because they are not regular links.

I got it. I'll try and this may take a while.

[djmattyg007]

this may take a while

That's part of why I suggested providing a nicer way of using <router-link> specifically 😉

[XieZongChen]

I'll develop it

[07akioni]

this may take a while

That's part of why I suggested providing a nicer way of using <router-link> specifically 😉

Done

[djmattyg007]

👍 I think this was a great solution, thank you!

[ghost]

这可能需要一段时间

这就是为什么我建议提供一种更好的方法来专门使用😉<router-link>

做

Your solution solves my need. thank you