Menu
I have created a horizontal menu for Element Plus UI on Vue. When I right click on a menu item, I do not have the option to open it in a new tab.
But when on the element plus documentation. When I right click on a menu item I have that option:
How do I achieve that functionality since I can't find any references on that on the documentation?
Menu Code:
<template>
<el-menu
class="sideMenu"
:collapse="isCollapse"
active-text-color="#409EFF"
:default-active="activeLink"
text-color="#909399"
background-color="#FFFFFF"
:router="true"
>
<el-menu-item index="/menu1">
<el-icon><DocumentChecked /></el-icon>
<span>Menu 1</span>
</el-menu-item>
<el-menu-item index="/menu2">
<el-icon><DocumentChecked /></el-icon>
<span>Menu 2</span>
</el-menu-item>
</el-menu>
</template>
692
According to Element Plus documentation el-menu-item has an attribute of route: which is type Obj. So, the el-menu-item class would be like:
<el-menu-item index="/menu1" route= VUE-ROUTER-OBJ>
Or You can use the menu attribute which activates routing from the index value of menu-items:
<!DOCTYPE html>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
router= true
>
<!-- router is the key attribute-->
<el-menu-item index="/" route="/"> Home </el-menu-item>
<el-menu-item index="PATH OF VUE ROUTER"> LINK NAME </el-menu-item>
answered Sep 19 '25 11:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With