vue ＜el-aside＞与＜el-main＞实现切换

最新推荐文章于 2025-06-18 16:54:13 发布

原创最新推荐文章于 2025-06-18 16:54:13 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue.js

电脑修理工专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何通过三步操作在Vue应用中设置路由，包括在路由表中添加组件路径、在侧边栏菜单中配置菜单项并使用router属性，以及在父组件中引入<router-view>。重点讲解了在el-menu组件中设置路由和动态切换页面的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三步走：
1.路由设置：在路由表index.js中添加组件的路由，我添加在父组件的children中；
2.sidemenu组件（自定义的侧边栏组件）中，修改index为路径，举例如下：

 <el-menu
    class="categories"
    default-active="0"
    @select="handleSelect"
    active-text-color="red" router> //这里注意添加router
    <el-menu-item index="/completeinfo"> //这里写路由
      <i class="el-icon-menu"></i>
      <span slot="title">完善个人信息</span>
    </el-menu-item>
    <el-menu-item index="/changepassword">
      <i class="el-icon-menu"></i>
      <span slot="title">修 改 密 码</span>
    </el-menu-item>
  </el-menu>