微客导航 » 文章资讯 » Vue.js 单页面多路由区域操作的实例详解

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

2024-01-28 06:00:04 327

单页面多路由区域操作

在一个页面中有两个及以上的区域，需要通过设置路由的index.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单页面多路由区域操作，如有疑问请大家留言，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐