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>