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>