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文件的代码
Jul 18 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
JS数据类型分类及常用判断方法
Nov 19 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
在HTML中使用JavaScript的两种方法
Dec 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项目打包方法
2008/02/18 PHP
PHP strtotime函数详解
2009/12/18 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
python实现dict版图遍历示例
2014/02/19 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
tornado 多进程模式解析
2018/01/15 Python
详解Python自建logging模块
2018/01/29 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
施工材料员岗位职责
2014/02/12 职场文书
设备售后服务承诺书
2014/05/30 职场文书
公证委托书标准格式
2014/09/11 职场文书
汶川大地震感悟
2015/08/10 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python