6-2.Vue-router

Vue-router

子路由设置

vue-router中的子路由，子路由的情况一般用在一个页面有它的基础模版，然后它下面的页面都隶属于这个模版。
假设demot模板是父模板，现在新建demot1和demo2两个子模板
新建子路由的步骤：
1.在src/components目录下新建demot1.vue和demot2.vue两个组件模板
2.在父模板引入<router-view>标签，给子模板提供插入位置。

<template>
	<div>
		<p style="color:red">这是demot页面</p>
		<router-view></router-view>
	</div>
</template>

3.在子模板中，设置输出的内容，改变data中的content。
在demot1模板中输出这是demot1页面，在demot2模板中输出这是demot2页面
demot1模板的代码：

<template>
	<div>
		{{ content }}
	</div>
</template>
<script>
	export default{
		name:'demot1',
		data(){
			return {
				content:'这是demot1页面'
			}
		}
	}
</script>
<style>
</style>

demot2模板的代码：

<template>
	<div>
		{{ content }}
	</div>
</template>
<script>
	export default{
		name:'demot1',
		data(){
			return {
				content:'这是demot2页面'
			}
		}
	}
</script>
<style>
</style>

4.修改router/index.js文件中的路由配置，在父路由的配置后面增添children字段。(子路由的写法是在原有的路由配置下加入children字段。)
注意：
在配置路由文件前需要先引入两个子模板组件

import Demot1 from '@/components/demot1'
import Demot2 from '@/components/demot2'

children后面接的是对象数组，数组里和其他配置路由基本相同，需要配置path和component。

export default new Router({
	routes: [ {
			path: '/demot',
			name: 'Demot',
			component: Demot,
			children:[
				{
					path:'/',
					component:Demot
				},
				{
					path:'demot1',
					component:Demot1
				},
				{
					path:'demot2',
					component:Demot2
				}
			]
		}
	]
})

运行结果：
在demot页面：

在demot1页面：

在demot2页面：