Vue路由命名视图及路由组件切换

本来一个页面里面只能有一个路由视图 对应 一个组件，现在可以多个路由视图（router-view） 对应 多个组件。

载入子页面

• 在routes中使用components属性，将组件名称及其组件对象包裹，由此可在页面中的router-view标签中添加name属性来对应路由组件，未定义name属性则默认填入default组件
• 在routes中使用children属性，并传入路由组件对象，可将其作为当前路由页面的子组件，跳转到该路由页面下，原先存在的父路由页面中的组件不会消失。（注意，子组件的path属性不能包括“/”，只需在router-link的to属性中写入完整路径即可）
• 在当前template标签结构中使用router-view标签来容纳此子页面的组件

				
					载入子页面
				

 

			var router=new VueRouter({
					
					routes:[
						{
							path:"/main_page",
							components:{//匹配路由地址下的名称显示对应组件,注意！！component要加s
								default:header,//default代表默认组件，即在router-view中的name
								'left':leftBox,
								'main':mainBox
							},
							children:[//子页面中的组件
								{path:"children",components:{'son_page':son_page}},//只有组件前有名称，router-view才会渲染对应的路由组件，否则只显示default未命名的
							]
						},
					]
				
			});

		

			
				进入主页面
				
				
				
				
				
		
		
		

 

载入二级页面

• 在跟当前路由页面组件相同的html结构中，使用router-view来存放新的二级页面的组件，其余的router-view标签由于没有匹配的路由组件，不会再渲染元素出来。

		

			
				进入主页面
				
				
				
				
				
				
				
		
		
		

• 在routes数组属性中放入二级页面的路由规则

					routes:[
						{
							path:"/main_page",
							components:{//匹配路由地址下的名称显示对应组件,注意！！component要加s
								default:header,//default代表默认组件，即在router-view中的name
								'left':leftBox,
								'main':mainBox
							},
							children:[//子页面中的组件
								{path:"children",components:{'son_page':son_page}},//只有组件前有名称，router-view才会渲染对应的路由组件，否则只显示default未命名的
							]
						},
						{
							path:"/main_page/second",
							components:{//匹配路由地址下的名称显示对应组件,注意！！component要加s
								'second_page':second_page,//二级页面
							}		
						},
					]

 

完整实例代码

	
		
		
		
		
		
	
	
		
		

			
				进入主页面