Vue-18-嵌套路由（子路由）

一、知识点部分

嵌套路由的写法：

1. 路由中包含的一个属性：children

var router = new VueRouter({
		routes:[
		{	
			path:'/login',
			name:'login',
			component:Login,
			children:[{}]
			}
		]
})

2. children和routers的格式是一样的，需要配置path等属性。（注意：在路由配置中，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。所以子路由不需要在路径前写“/”）

二、代码部分

		var ComponentA = {
			template:`
			<div>
				<h3>Let's learn Vue Togeter!</h3>
				<router-link :to="{name:'myA'}">Login A</router-link>
				<div class="boxa">
					<router-view></router-view>
				</div>
			</div>
			`
		};
		var ComponentB = {
			template:`
			<div>
				<h3>You are the best!</h3>
					<router-link :to="{name:'myB'}">Login B</router-link>
				<div class="boxb">
					<router-view></router-view>
				</div>
			</div>
			
			`
		};
		var MyA = {
			template:`
				<div>
					<h3>A little component A</h3>	
				</div>
			`
		};
		var MyB = {
			template:`
				<div>
					<h3>A little component B</h3>	
				</div>
			`
		};
		var App = {
			template:`
				<div>
					<h3>Hello Vue!</h3>
					<router-link :to="{name:'componentA'}">切换A组件</router-link>
					<router-link :to="{name:'componentB'}">切换B组件</router-link>
					<router-view></router-view>
				</div>
			`
		};
		var router  = new VueRouter({
			routes:[
				{
					path:"/componentA",
					component:ComponentA,
					name:"componentA",
					children:[
						{
							path:'myA',
							component:MyA,
							name:"myA",
							children:[
								{
									path:"myA-A",
									component:MyA-A,
									name:"Myaa"
								}
							]
						}
					]
				},
				{
					path:"/componentB",
					component:ComponentB,
					name:"componentB",
					children:[
						{
							path:'myB',
							component:MyB,
							name:"myB"
						}
					]
				}
			]
		})
		new Vue({
			el:"#app",
			data(){
				return{

				}
			},
			template:`
				<App/>
			`,
			components:{
				App
			},
			router
		})