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 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
PHP邮件群发机实现代码
2016/02/16 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
python测试驱动开发实例
2014/10/08 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python自带的IDE在哪里
2020/07/01 Python
降低python版本的操作方法
2020/09/11 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
连锁酒店店长职责范本
2014/02/13 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
运动会的口号
2014/06/09 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
2014年资料员工作总结
2014/11/18 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL