vue学习 32路由精讲之二级路由和三级路由

分级时，默认打开指定下级的路由，使用redirect属性，其值为子级路由的路径path.

子级使用属性children: 值为数组，数组中每个元素都是一个路由对象

二级路由

在main.js中配置路由

// 二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'

在routes中，（routes是由每一个路由对象组成的数组）

{
		path: '/about',
		name: 'aboutLink',
		component: About,
		redirect: '/about/contact',
		children: [{
				path: '/about/contact',
				name: "contactLink",
				component: Contact,
				redirect: '/personname',
				children: [{
						path: '/phone',
						name: "phoneNumber",
						component: Phone
					},
					{
						path: '/personname',
						name: "personName",
						component: PersonName
					}
				]
			},
			{
				path: '/history',
				name: "historyLink",
				component: History
			},
			{
				path: '/delivery',
				name: "deliveryLink",
				component: Delivery
			},
			{
				path: '/orderingGuide',
				name: "orderingGuideLink",
				component: OrderingGuide
			},
		]
	}

About.vue

三级路由

// 三级路由
import Phone from './components/about/contact/Phone'
import PersonName from './components/about/contact/PersonName'

Contact.vue