router-view 的理解

主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。比如：

视图层：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <div
       
        
       
       id
       
       =
       
       "app"
       
       >
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <router-view></router-view>
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </div>
      
      
     
     
   
   

路由定义：

   
   

     
     

      
      

     
     
     
     

      
      

       
       router
       
       .
       
       map
       
       ({
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       '/foo'
       
       :
       
        
       
       {
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       // 路由匹配到/foo时，会渲染一个Foo组件
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           component
       
       :
       
        
       
       Foo
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       }
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       })
      
      
     
     
   
   

初始化实例:

   
   

     
     

      
      

     
     
     
     

      
      

       
       // start app
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       var
       
        
       
       App
       
        
       
       =
       
        
       
       Vue
       
       .
       
       extend
       
       ({})
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       router
       
       .
       
       start
       
       (
       
       App
       
       ,
       
        
       
       '#app'
       
       )
      
      
     
     
   
   

当你访问 /foo 时，router-view 就被 Foo 组件替换了。

组件的嵌套，一样的逻辑，看下文档和demo吧。 嵌套路由