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

 更新时间:2017年07月17日 11:42:45   投稿:lqh   我要评论
这篇文章主要介绍了 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;"></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移动端轻量级的轮播组件实现代码

    vue移动端轻量级的轮播组件实现代码

    这篇文章主要介绍了vue移动端轻量级的轮播组件实现代码,一个简单的移动端卡片滑动轮播组件,适用于Vue2.x。本文给大家带来了实例代码,需要的朋友参考下吧
    2018-07-07
  • vue数据双向绑定原理解析(get & set)

    vue数据双向绑定原理解析(get & set)

    这篇文章主要为大家详细解析了vue.js数据双向绑定原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue中如何实现轮播图的示例代码

    Vue中如何实现轮播图的示例代码

    本篇文章主要介绍了Vue中如何实现轮播图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue-cli3.x + axios 跨域方案踩坑指北

    Vue-cli3.x + axios 跨域方案踩坑指北

    这篇文章主要介绍了Vue-cli3.x + axios 跨域方案踩坑指北,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue-content-loader内容加载器的使用方法

    vue-content-loader内容加载器的使用方法

    这篇文章主要介绍了vue-content-loader内容加载器的使用方法,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • Vue不能观察到数组length的变化

    Vue不能观察到数组length的变化

    因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断。这篇文章主要介绍了为什么Vue不能观察到数组length的变化,需要的朋友可以参考下
    2018-06-06
  • vue.js框架实现表单排序和分页效果

    vue.js框架实现表单排序和分页效果

    这篇文章主要为大家详细介绍了vue.js框架实现表单排序和分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue 中 beforeRouteEnter 死循环的问题

    vue 中 beforeRouteEnter 死循环的问题

    这篇文章主要介绍了vue beforeRouteEnter 死循环的问题,在文章末尾给大家补充介绍了vue中beforeRouteEnter使用的误区,需要的朋友可以参考下
    2019-04-04
  • 基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

    基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

    本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程,包含发布到npm,构建自己的npm包,供下载安装使用的技巧,非常不错,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • Vue.directive使用注意(小结)

    Vue.directive使用注意(小结)

    这篇文章主要介绍了Vue.directive使用注意(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论