element ui实现router-view嵌套路由跳转
温馨提示：
本文最后更新于 2022年08月21日，已超过 705 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。
今天用element ui实现一下，点击左侧边栏，在右侧打开内容，而不是新打开一个标签。
如果你用的是Container布局容器，那么这个功能很好实现
但是，我这里用的是Layout布局，所以需要搭配一下router-view 来绑定一个内容显示的区域
效果图
实现思路
代码实现
新增右侧内容显示区域
其实主要实现的就是点击左侧，如何让右侧显示对应的页面，首先在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')
}
},
]
}
正文到此结束
- 本文标签： elementui vue
- 本文链接： https://www.it1997.com/article/103
- 版权声明： 本文由小陈没烦恼原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
近期评论
-
来自： 好用的截图工具FastStone Capture 带激活码）
-
来自： 留言板
-
来自： 留言板
-
来自： 留言板
-
来自： 留言板