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 相关文章推荐
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
js编写三级联动简单案例
Dec 21 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
解密效果
2006/06/23 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
移动端界面的适配
2017/01/11 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
js实现图片上传并预览功能
2018/08/06 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python基础之函数用法实例详解
2014/09/10 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python 解压pkl文件的方法
2018/10/25 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Django如何实现上传图片功能
2019/08/16 Python
python生成大写32位uuid代码
2020/03/03 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python如何读取、写入JSON数据
2020/07/28 Python
线程同步的方法
2016/11/23 面试题
大学生村官任职感言
2014/01/09 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
护士先进个人总结
2015/02/13 职场文书
2015年个人思想总结
2015/03/09 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技