vue实现同一个页面可以有多个router-view的方法
2018-09-20 15:04
986 查看
使用Vue+Element搭建项目的时候,为了避免一个页面过大,将tab里面的内容分成多个页面,并使用同级视图展示
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户详情" name="first"> <router-view></router-view> </el-tab-pane> <el-tab-pane label="用户组" name="second"> <router-view name="second"></router-view> </el-tab-pane> <el-tab-pane label="用户权限" name="third"> <router-view name="third"></router-view> </el-tab-pane> <el-tab-pane label="用户信息" name="fourth"> <router-view name="fourth"></router-view> </el-tab-pane> <el-tab-pane label="部门信息" name="fifth"> <router-view name="fifth"></router-view> </el-tab-pane> </el-tabs>
分别给router-view定义一个name,默认显示的可以不用定义
然后在路由中定义 components ,
path: '/admin/userManagement/userNew/userShow', components: { default: AdminUserShow, second: AdminUserGroup }
默认显示的name在components中定义为default
详情可以查看官方文档
以上这篇vue实现同一个页面可以有多个router-view的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue-Router实现页面正在加载特效方法示例
- java中可以实现一个线程的方法
- 可以在一个页面里面使用多个uitableview ,并使用同一个delegate
- java基础问题----java中有几种方法可以实现一个线
- 设计并实现一个LogService,应用开发时可以打印log到视图(TextView)中显示
- class view中的一个方法实现时出现下面错误 cannot find the definition (implementation) of this function
- java中有几种方法可以实现一个线程?用什么关键字修饰同步
- 一个页面中用Get方法到底可以发送多少字节的数据呢?
- 多种方法实现当jsp页面完全加载完成后执行一个js函数
- Oracle ADF 一个页面实现 维护区域Form和查看区域Table 方法 另一种方法(推荐)
- XHTML 的一个实例, 其实这个实例的方法已经可以实现所有要实现的布局. by Emerald 绿色学院 - Green Institute
- thinkphp 一个页面使用2次分页的实现方法
- thinkphp 一个页面使用2次分页的实现方法
- 用SurfaceView,Timer以及Handler实现的一个带有音乐和文字的电子相册,可以自动播放~
- Java 有几程方法可以实现一个线程?用什么关键字修饰同步?stop()和suspend()为什么不推荐使用?
- 使用extjs,来实现一个页面调用另一个页面中的方法,并且能获得方法的返回值
- Oracle ADF 一个页面实现 维护区域Form和查看区域Table 方法
- 如何在页面内制作一个可以实现'另存为'的链接
- java开发线程篇1:java中有几种方法可以实现一个线程?用什么关键字修饰同步方法? stop()和suspend()方法为何不推荐使用?
- 给一个页面进行变形实现魔法的一面变形----之将View替换成ImageView