返回首页 | 注册送体验金88送现金

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

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

时间:2017-09-07 编辑:admin

单页面多路由区域操作

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

App.vue 中设置:

 router-view /router-view 
 router-view name="left" /router-view 
 router-view name="right" /router-view 

index.php中设置:

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.php 单页面多路由区域操作,如有疑问请我留言,感谢阅览,希望能协助到我,谢谢我对本站的支撑!


浏览:

网站建设

流程

    网站建设流程