vue-router 第四篇,多个router-view分离

这里特别需要注意的是compontnts  是复数形式,后面要加  s  ,否则不对

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const Home = {
	template :'<div>Home 的内容</div>'
}
const First = {
	template:'<div>First 的内容</div>'
}

const Second = {
	template:'<div>Second 的内容</div>'
}
const hehe = {
	template:'<div>hehe 的内容</div>'
}



const router = new VueRouter({
	mode:'history',
	base:__dirname,
	routes:[
		{path:'/',components:{
			default:Home,
			left:First,
			right:Second
		}},
		{path:'/First',components:{
			default:Home,
			left:hehe,
			right:Second
		}},
	]
})




new Vue({
	router,
	template:`
		<div>
			<h1>导航</h1>
			<ul>
				<li><router-link to="/">Home</router-link></li>
				<li><router-link to="/First">First</router-link></li>
			</ul>
			<router-view></router-view>
			<router-view name="left" style="background:#990000;float:left;width:50%;height:300px"></router-view>
			<router-view name="right" style="background:#000000;float:right;width:50%;height:300px"></router-view>
		</div>
	`
}).$mount('#app')














随机浏览