<el-menu router unique-opened mode="vertical" :collapse="keyCollapse"> <el-menu-item index="/email/send"> <img src="/img/mail/icon_01.png" class="icon-size" /> <span slot="title">写 信</span> </el-menu-item> 怎么做成页面跳转到另一个页面
时间: 2024-04-10 15:33:23 浏览: 118
vue2+el-menu实现路由跳转及当前项的设置方法实例
要将菜单项实现页面跳转,你可以使用路由来实现。首先,确保你已经安装了 Vue Router。然后,按照以下步骤进行操作:
1. 在你的 Vue 组件中导入 Vue Router:
```javascript
import router from '@/router'; // 假设你的路由文件在 'src/router' 目录下
```
2. 在菜单项的 `el-menu-item` 标签中添加 `@click` 事件,并在事件处理程序中使用 `this.$router.push` 方法进行页面跳转:
```html
<el-menu-item index="/email/send" @click="goToPage('/email/send')">
<img src="/img/mail/icon_01.png" class="icon-size" />
<span slot="title">写 信</span>
</el-menu-item>
```
3. 在 Vue 组件的 `methods` 中定义 `goToPage` 方法来处理页面跳转:
```javascript
methods: {
goToPage(path) {
this.$router.push(path);
}
}
```
这样,当用户点击菜单项时,页面将会跳转到指定的路径 `/email/send`。确保你的路由配置中有对应的路径,并且已经正确设置了组件的渲染规则。
希望能帮到你!如果还有其他问题,请随时提问。
阅读全文