Vue.js——路由2 复用路由
在routes.js 配置路由中 将 component 改为 components
export const routes=[
{path:'/',name:"homeLink",components:{
default:Home,
'orderingGuide':OrderingGuide,
'delivery':Delivery,
'history':History
}},
{path:'/menu',component:Menu},
{path:'/login',component:Login},
{path:'/register',component:Register},
{path:'*',redirect:'/'}
]
/*
* components:{
* default:默认组件,
* '自定义组件名字':引入的组件,
* }
*/在需要复用的页面中使用 <router-view name=" 自定义组件名字"></router-view name>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4">
<router-view name="orderingGuide"></router-view>
</div>
<div class="col-sm-12 col-md-4">
<router-view name="delivery"></router-view>
</div>
<div class="col-sm-12 col-md-4">
<router-view name="history"></router-view>
</div>
</div>
</div>