点击el-menu-item切换el-main页面显示怎么配置路由
时间: 2023-12-06 10:05:33 浏览: 59
在使用 `el-menu` 和 `el-menu-item` 组件的时候,可以通过 `router-link` 进行路由跳转。例如:
```
<template>
<el-menu default-active="home" mode="horizontal" @select="handleMenuSelect">
<el-menu-item index="home" route="/home">首页</el-menu-item>
<el-menu-item index="about" route="/about">关于我们</el-menu-item>
<el-menu-item index="contact" route="/contact">联系我们</el-menu-item>
</el-menu>
<el-main>
<router-view></router-view>
</el-main>
</template>
<script>
export default {
methods: {
handleMenuSelect(index) {
// 手动触发路由跳转
this.$router.push(index);
}
}
}
</script>
```
在 `el-menu-item` 组件中,通过设置 `route` 属性来指定跳转的路由路径。然后在 `handleMenuSelect` 方法中,通过 `$router.push` 方法手动触发路由跳转。
最后,在页面组件中,可以通过 `router-view` 组件来显示对应的路由组件。
```
<template>
<div>
<h1>首页内容</h1>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
```
其他页面同理,只需要在路由文件中定义对应的路由即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> <el-row class="header"> <el-col :span="24"> 后台管理系统 注销 </el-col> </el-row> <el-row class="content"> <el-col :span="6" class="sidebar"> <el-menu :default-active="activeMenu" class="menu"> <el-menu-item index="1"> 首页 </el-menu-item> <el-menu-item index="/category"> 分类管理 <router-link to="/category"> <el-menu-item>分类管理</el-menu-item> </router-link> </el-menu-item> <el-menu-item index="3"> 系统设置 </el-menu-item> </el-menu> </el-col> <el-col :span="18" class="main"> <router-view ></router-view> </el-col> </el-row> <el-row class="footer"> <el-col :span="24"> 版权所有 © 2022 后台管理系统 </el-col> </el-row> </template>还是会跳到新页面
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)