vue-router 命名视图-同级

.v-enter, .v-leave-to {
	opacity: 0;
	transform: translateX(20px);
}
.v-enter-active, .v-leave-active {
	transition: all .3s ease;
}
           

<div id="app">
	<h1>命名视图-单路由多组件切换</h1>
	<ul>
		<li>
			<router-link to="/">/</router-link>
		</li>
		<li>
			<router-link to="/other">other</router-link>
		</li>
	</ul>
	<!-- 一个路由内置三个组件，普通的方法无法让三个组件作为单独的个体过渡（直接使用transition-group会让三个组件作为一个整体过渡） -->
	<!-- 这个过渡实现了三个组件在相同时间间隔内依次出现，出现的方向从右往左，从透明到不透明 -->
		<transition v-for="(item,index) in items" :key="index"  mode="out-in" :duration="index*200 + 200">
			<router-view :name="item"></router-view>
		</transition>
</div>
           

<script type="text/javascript">
	const foo = {template:'<div>foo</div>'}
	const bar = {template:'<div>bar</div>'}
	const baz = {template:'<div>baz</div>'}
	const router = new VueRouter({
		routes:[
			{
				path:'/',
				components:{
					default:foo,
					a:bar,
					b:baz
				}
			},
			{
				path:'/other',
				components:{
					default:bar,
					a:baz,
					b:foo
				}
			}
		]
	})
	const app = new Vue({
		el:"#app",
		data:{
			items:[undefined,'a','b']
		},
		router:router
		})
</script>