Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作
在一个页面中有两个及以上的
App.vue中设置:
index.js中设置:
importVuefrom'vue' importRouterfrom'vue-router' importHellofrom'@/components/Hello' importFirst1from'@/components/first1' importFirst2from'@/components/first2' Vue.use(Router) exportdefaultnewRouter({ routes:[ { path:'/', name:'Hello', components:{ default:Hello, left:First1, right:First2 } } ] })
下面的设置是当url为/#/first时,交换两个组件显示的位置
exportdefaultnewRouter({ routes:[ { path:'/', name:'Hello', components:{ default:Hello, left:First1, right:First2 } },{ path:'/first', name:'First', components:{ default:Hello, left:First2, right:First1 } } ] })
以上就是Vue.js单页面多路由区域操作,如有疑问请大家留言,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!