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


Posted in Javascript onJuly 17, 2017

单页面多路由区域操作

在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容

App.vue 中设置:

<router-view></router-view>
<router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></router-view>
<router-view name="right" style="float: left;width: 50%; height: 300px;background-color: #898;"></router-view>

index.js中设置:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import First1 from '@/components/first1'
import First2 from '@/components/first2'

Vue.use(Router)

export default new Router ({
 routes : [
  {
   path : '/',
   name : 'Hello',
   components : {
    default : Hello,
    left : First1,
    right : First2
   }
  }
 ]
})

下面的设置是当url为/#/first 时,交换两个组件显示的位置

export default new Router ({
 routes : [
  {
   path : '/',
   name : 'Hello',
   components : {
    default : Hello,
    left : First1,
    right : First2
   }
  }, {
   path : '/first',
   name : 'First',
   components : {
    default : Hello,
    left : First2,
    right : First1
   }   
  }
 ]
})

以上就是 Vue.js 单页面多路由区域操作,如有疑问请大家留言,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 #Javascript
JS中Safari浏览器中的Date
Jul 17 #Javascript
Vue.extend构造器的详解
Jul 17 #Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 #Javascript
extjs简介_动力节点Java学院整理
Jul 17 #Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
You might like
关于js和php对url编码的处理方法
2014/03/04 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php上传图片类及用法示例
2016/05/11 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python多线程多进程实例对比解析
2020/03/12 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
竞选班长演讲稿
2013/12/30 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
社区交通安全实施方案
2014/03/22 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
教师节主题班会教案
2015/08/17 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang