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

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

赞 (0)

相关推荐

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • vue2 设置router-view默认路径的实例

    在学习vue的时候,遇到很多问题,这里做一些总结,持续更新. 今天说一个问题,就是在学习vue的时候,从之前的1.0版本升级到2.x的时候,遇到的问题.一个简单的设置默认路由. 在vue的官方文档中,并没有对这个做出案例和解释,不知道是不是我没发现.反正这个问题算是遇到的小小的坑吧.原谅一个菜鸟,什么都不懂. 在察阅文章的过程中,发现有前辈总结了这个方面的知识. 具体实现如下: import Vue from 'vue' import Router from 'vue-router' impor

  • vue2.0 路由不显示router-view的解决方法

    今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=|| 这是花了一上午整出来的main.js,还有网上的同道们的提醒: import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App'; import goods from './components/goods/goods';

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

    使用Vue+Element搭建项目的时候,为了避免一个页面过大,将tab里面的内容分成多个页面,并使用同级视图展示 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户详情" name="first"> <router-view></router-view> </el-t

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • vue在同一个页面重复引用相同组件如何区分二者

    vue在同一个页面重复引用相同组件如何区分二者

    目录 同一个页面重复引用相同组件如何区分二者 1.使用情境 2.解决方法 在同一个页面重复引用相同组件时的干扰处理 同一个页面重复引用相同组件如何区分二者 1.使用情境 我在同一个vue中引用了同样的一个图层选择的组件,需要区分二者的选择的radio值,如果不做区分,这二者选择的radio值看上去将会一样 2.解决方法 先说原理,这个重复引用的组件虽然一样,但是二者在被创建的时候各自走了一遍生命周期,所以变量之间不冲突. 首先在引用组件中新增一个props,这里命名为spareId,用来区分二者

  • 使用vue重构资讯页面的实例代码解析

    从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在酝酿着如何将angular重构成vue. 代码结构设计 这个资讯项目代码整体都是使用angular.js来去实现的,而此次想重构的资讯详情页面只是其中的一个页面,所以新建了一个文件夹 /newApp .作为以后新技术的文件夹,以后使用vue技术的都放在这个文件夹下,区别于原先文件夹 /app . 在

  • vue 动态给每个页面添加title、关键词和描述的方法

    前言:直接写html加title和关键词想必大家都知道怎么去加,但用vue框架开发的项目我们怎么去动态的给每个页面添加呢 ↓ 先在router.js里面配置我们的title.关键词和描述 { path: '/train', name: 'Train', component: () => import('../components/page/Train.vue'), meta: { title: '教师培训-恩启官网', content: { keywords: '教师培训.恩启培训.恩启云课堂.

  • Vue 路由返回恢复页面状态的操作方法

    路由参数.路由导航守卫:页面后退返回时,保留搜索结果 需求场景:首页搜索内容,点击跳转至详情页,页面后退返回主页,保留搜索结果. 方案:路由参数:路由守卫 需求描述 在使用 Vue 开发前端的时候遇到一个场景:在首页进行一些数据搜索,点击搜索结果进入详情页面,浏览详情页后返回主页.但这时候之前的搜索记录和翻页就消失了,用户体验不好.所以需要在返回后恢复跳转前的页面参数状态. 当然如果条件允许,最简单的办法是点击搜索结果使用新页面打开(例如百度那样).但当前需求是一个完整的Vue开发的项目,并不是

  • 新手vue构建单页面应用实例代码

    新手vue构建单页面应用实例代码

    本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一.目录结构: 二.搭建项目 先安装 vue-cli: sudo npm install -g vue-cli 使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载

  • js实现同一个页面多个渐变效果的方法

    本文实例讲述了js实现同一个页面多个渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现5个元素中随便一个,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小的效果. 要点一: var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; } 根据目标值和当时值的对比,来决定是正向还是负向速度. 要点二: for(i=0; i<runs_li.length; i++){ runs_li[i].timer = n

  • 利用webstrom调试Vue.js单页面程序的方法教程

    利用webstrom调试Vue.js单页面程序的方法教程

    前言 使用 webstrom 调试 Vue.js 单页面程序,理论上来说应该是支持所有用 webpack 构建的应用程序 webstrom 版本:2017.1 代码:使用 vue-cli 构建的基础单页面应用 修改 webpack 配置 由于 webpack 把所有文件全部打包到一起,所以我们需要 webpack 提供给我们一个源地图 修改 devtool 为 source-map 这是我的开发配置文件 webpack.dev.conf.js module.exports = merge(bas

  • Vue.js 单页面多路由区域操作的实例详解

    单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r

随机推荐