vue-router 第二篇,多级路由

需要注意的是,在多级路由中,router 里面的chindren 数组中,路由设置是不能在前面加 '/'的,加'/'会变成绝对路径,这里需要的是相对路径

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 FirstFirst = {
	template:'<div>firstfirst 的内容</div>'
}
const FirstSecond = {
	template:'<div>FirstSecond 的内容</div>'
}
const Second = {
	template:'<div>Second 的内容</div>'
}
const asdf = {
	template:`
		<div>
			<h2>组件2</h2>
			<router-view></router-view>
		</div>
	`
}
const router = new VueRouter({
	mode:'history',
	base:__dirname,
	routes:[
		{path:'/',component:Home},
		{path:'/First',component:asdf,
			children:[
				{path:'/',component:First},
				{path:'First',component:FirstFirst},
				{path:'Second',component:FirstSecond},

			]
		},
		{path:'/Second',component: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>
					<ol>
						<li><router-link to="/First/First">first-first</router-link></li>
						<li><router-link to="/First/Second">first-Second</router-link></li>
					</ol>
				<li><router-link to="/Second">Second</router-link></li>
			</ul>
			<router-view></router-view>
		</div>
	`
}).$mount('#app')

随机浏览