vue-router 命名视图-嵌套

如果 < router-view >设置了名称，则会渲染对应的路由配置中 components 下的相应组件。
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。

.parent{
	background-color: #aaa;
	height: 200px;
}
.child1{
	background-color: #FF0000;
	height: 50px;
}
.child2{
	background-color: #FFFF00;
	height: 50px;
}

<div id="app">
  <router-view>router-view>
div>

<script type="text/javascript">
	const user = {
		template: `
		

			
主视图
			邮箱信息
			用户信息
			
			
		
	  `
	}
	const email = {template: `
子视图1：修改邮箱
`}
	const profile = {template:'
子视图1：修改简介
'}
	const details = {template: `
子视图2：修改详细信息
`}
	const router = new VueRouter({
	  routes: [
	    { path: '/settings',
	      component: user,
	      children: [{
	      	path: 'emails',
	        component: email
	      }, {
	      	path: 'profile',
	        components: {
	        	default: profile,
				details: details
	        }
	      }]
	    }
	  ]
	})
	router.push('/settings/emails')
	new Vue({
		router,
	  el: '#app'
	})
</script>