Vue路由_vue路由首页-优快云博客

本文介绍了一个使用 Vue.js 构建的路由系统实战案例，详细解释了如何定义组件、配置路由及实现子路由的过程。通过本教程，读者可以了解 Vue 路由的基本用法和配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



	
		
   
   
		
		<script src="js/vue.js"></script>
		<script src="js/vue-router.min.js"></script>
	
	
		
		
   
   
			
    
    
			
    
    
     
     首页
    
    
			
    
    
     
     新闻
    
    
			
    
    
     
     书籍
    
    
			
    
    
			
    
    
		
   
   
		
		
   
   
		
   
   
     
     这是主页面
    
    
		
   
   

		
   
   
     
     这是新闻页面
				
     
     
      
      这里是子路由
     
     
				
     
     
			
    
    
		
   
   
		    
			
   
   
     
     点击子路由出来的东西啊~ 
    
    
			
   
   
		
		
   
   
     
     这是书籍页面
    
    
		
   
   
	
	
	<script type="text/javascript">
			//3-2,定义组件
			var home={
				template:'#home'
			}
			var news={
				template:'#news'
			}
			var book={
				template:'#book'
			}
			
			var son={
				template:"#son"
			}
			
			//配置路由  
			//path属性配置路由地址   
			//“*”默认路径   redirect属性配置路由重定向	
			//component 属性 配置该地址需要加载的组件试图 简单说就是3-2中var的变量
			var router=[
				{path:'/home',component:home},
				{path:'/news',component:news,
					'children':[{
						path:'son',component:son
					}]
				},
				{path:'/book',component:book},
				{path:'*',redirect:'/home'}
			]
			
			//实例化路由对象
			//router老老实实的写这个名字
			//VueRouter里面的属性名称不能变  routes
			var routers=new VueRouter({
				routes:router网银
			})
		
			//VueRouter挂载到Vue实例上
			var vm = new Vue({
				router:routers,
				el:"#out",
			})
	</script>