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 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
Vue中实现权限控制的方法示例
Jun 07 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 数组实例说明
2008/08/18 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP 错误处理机制
2015/07/06 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
项目考察欢迎辞
2014/01/17 职场文书
党校学习党性分析材料
2014/12/19 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
房产电话营销开场白
2015/05/29 职场文书
宇宙与人观后感
2015/06/05 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python