vue实现同一个页面可以有多个router-view的方法


Posted in Javascript onSeptember 20, 2018

使用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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
Vue实现剪切板图片压缩功能
Feb 04 Javascript
vuejs router history 配置到iis的方法
Sep 20 #Javascript
关于单文件组件.vue的使用
Sep 20 #Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 #Javascript
jQuery pjax 应用简单示例
Sep 20 #jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 #Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 #Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 #Javascript
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
其他功能
2006/10/09 PHP
Yii使用技巧大汇总
2015/12/29 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
python实现机器学习之元线性回归
2018/09/06 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python any()函数的使用方法
2019/10/28 Python
Pytorch之finetune使用详解
2020/01/18 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
销售冠军获奖感言
2014/02/03 职场文书
入党转正介绍人意见
2015/06/03 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript