Vue-router创建子路由的方法【路由嵌套】

import VueRouter from 'vue-router'
import Home from '../pages/Home'   // 引入组件
import PubTable1 from '../pages/PubTable1'   // 引入组件
import PubTable2 from '../pages/PubTable2'   // 引入组件

// 创建路由器
const router = new VueRouter({
	routes:[
		{
			// 访问根路径时，重定向到login组件
			path: '/', 
			redirect: 'home'
		},
		{
			name:'home', 	  // 父路由名
			path:'/home',	  // 父路由路径
			component:Home,   // 父对应组件名
			children: [
			  {
				name:'pubtable1',      						// 子路由名
				path: 'pubtable1',							// 子路由路径
				component: PubTable1						// 子对应组件名
			  },
			  {
				name:'pubtable2',      						// 子路由名
				path: 'pubtable2',							// 子路由路径
				component: PubTable2						// 子对应组件名
			  }
			]
		},
	]
})


export default router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36