Vue.js 单页面多路由区域操作的实例详解
2017-07-17 11:42
1261 查看
单页面多路由区域操作
在一个页面中有两个及以上的<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 单页面多路由区域操作,如有疑问请大家留言,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
相关文章推荐
- Vue.js进行查询操作的实例详解
- Vue.js框架路由使用方法实例详解
- Vue.js—组件快速入门及Vue路由实例应用
- Vue.js实例方法之生命周期详解
- vue.js单页面应用实例的简单实现
- Vue.js路由vue-router使用方法详解
- Vue-router路由判断页面未登录跳转到登录页面的实例
- vue.js用vue-router路由传参时页面刷新后参数消失的问题
- 单页面多路由区域操作
- 详解Vue路由History mode模式中页面无法渲染的原因及解决
- vue 下列表侧滑操作实例代码详解
- vue.js路由参数简单实例讲解------简单易懂
- Vue.js中组件中的slot实例详解
- 使用Vue-Router 2实现路由功能实例详解
- Vue.js路由组件vue-router使用方法详解
- vue.js通过路由实现经典的三栏布局实例代码
- JS监控关闭浏览器操作的实例详解
- 详解Vue.js搭建路由报错 router.map is not a function
- 详解vue-cli + webpack 多页面实例应用
- 【vuejs路由】vuejs 路由基础入门实战操作详细指南