原创

element ui实现router-view嵌套路由跳转

温馨提示:
本文最后更新于 2022年08月21日,已超过 43 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

今天用element ui实现一下,点击左侧边栏,在右侧打开内容,而不是新打开一个标签。

如果你用的是Container布局容器,那么这个功能很好实现
但是,我这里用的是Layout布局,所以需要搭配一下router-view 来绑定一个内容显示的区域

效果图

file
file

实现思路

代码实现

新增右侧内容显示区域

其实主要实现的就是点击左侧,如何让右侧显示对应的页面,首先在index.vue里面得有一个显示内容的区域,这个区域就是

<router-view name="MainMenu"></router-view>

需要注意的是,name必须要填

index.vue

<template>
  <div class="container">
    <top-menu></top-menu>
    <div class="content-box">
      <el-row :gutter="10" >
        <el-col :span="4">
          <left-menu></left-menu>
        </el-col>
        <el-col :span="20">
          <router-view name="MainMenu"></router-view>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

left.vue

<!--home-->
<template>
  <div class="left-bar" style="background-color: yellow">
    <el-menu
      default-active="this.$route.path"
      unique-opened
      class="el-menu-vertical-demo"
      :router="true">
      <el-menu-item index="/user/main-menu/index1">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="/user/main-menu/index2">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

新增右侧内容页面

新建一个右侧的内容页面,index1.vue和index2.vue,配置两个页面的路由
需要注意的是:MainMenu是在router-view配置的name,:router="true"
使用的是components,但我也并不知道和component的区别是什么

页面路由

{
    path: '/user',
    component: () => import('@/views/library/user/index'),
    hidden: true,
    children: [
      {
        path: 'main-menu/index1',
        components: {
        MainMenu:() => import('@/views/library/user/MenuMain/index1')
        }
      },
      {
        path: 'main-menu/index2',
        components: {
          MainMenu:() => import('@/views/library/user/MenuMain/index2')
        }
      },
    ]
  }
正文到此结束
本文目录