单页应用程序(SPA)：通过路由系统把组件串联起来并且只有一个html页面的程序  
    
    
    
。

多页面应用程序(MPA)：整个应用程序中有多个html页面

     


     


     


     。

hash路由和history路由的区别

hash路由有# 




 




 




 



。背后是监听onhashchange事件实现的    
    
    
    
，hash路由部署上线不会出现404.

history路由没有#   


     


     


     


，背后是基于history api实现的



 




 




 




 ，histo路由部署上线会出现404问题.

<router-view>和<router-link>(全局组件)

<router-view>视图容器:name属性用于指定命令视图  

   

   

   

。

<router-link>用于设计菜单导航：to属性用于指定跳转的目标   

   

   

   
，tag属性用于指定渲染什么标签    

     

     

     

，默认渲染a标签




  




  




  




 ，active-class/exact-active-class用于指定菜单的高亮样式

     

     

     

    。

$route和$router(内置API)

$route路由信息：this.$route.fullPath/query/params/meta（watch可以监听$route的变化）

$router路由实例：用于路由跳转  


  


  


  
，this.$router.push()向前跳转     
     
     
     
，this.$router.replace()向前跳转




   




   




   




 ，this.$router.back()返回上一次  




  




  




  


。

声明式跳转和编程式跳转

声明式跳转：就是使用<router-link>跳转
 



 



 



 
，一般用于菜单设计  


  


  


  


。

编程式跳转：就是使用$router跳转                    ，一般用于事件中
     
     
     
   。

命名视图和命名路由

命名视图是给<router-view>加一个name属性
   




   




   




   

。

命名路由是给{path,component}路由规则取个名字 



 



 



 



。

query传参和动态路由传参

query传参：在跳转路由的url后面用?a=1&b=2这种方式传参 




    




    




    




 ，在另一个组件中使用this.$router.query接收                  。

动态路由传参：像这样`{path:/good/:id,component}`定义路由规则

















，在这条路由规则中使用this.$route.params接收或者开启props:true使用props选项来接收

    




    




    




    
。

路由懒加载和重定向与别名

路由懒加载：当一个SPA应用程序中的页面够多时                    ，需要根据路由系统进行按需加载组件  



     



     



     



 ，而不是一次性加载所有组件；使用路由懒加载背后的原理时webpack代码分割技术

















，vue异步组件；路由懒加载是一种性能优化方案



















。

重定向：当用户访问一个未定义的路由时    
    
    
    
，给一个重定向（跳转一个已定义的路由上）这是一种用户体验的优化                  。重定向的规则一般要放在路由规则的最后面

     



     



     



     。

别名：别名是path的简写   


     


     


     


，可以用于路由访问；当path比较复杂时



 




 




 




 ，需要给它设计一个别名



















。

嵌套视图和导航守卫

嵌套视图（嵌套路由）：所谓的“嵌套视图  
    
    
    
”从组件树的角度来讲   

   

   

   
，<router-view>所显示的组件从内部还有<router-view>；从路由规则角度来讲  
    
    
    
。{path,component,children}带有children这个属性

     


     


     


     。

导航守卫（路由元信息）：在router实例对象上有三个重要的全局钩子(beforeEach, beforeResolve,afterEach),每次url发生变化    

     

     

     

，都会触发这三个钩子按顺序执行 




 




 




 



。那么以后我可以在这些钩子编写验证逻辑




  




  




  




 ，如果验证通过就放你过去  


  


  


  
，你就可以正常访问你想访问的页面；如果验证失败     
     
     
     
，就阻止你访问目标页面




   




   




   




 ，这就实现“守卫

     


     


     


     ”的效用了  

   

   

   

。在路由中
 



 



 



 
，使用导航守卫和路由元信息                    ，可以做鉴权  
    
    
    
、还可以做权限设计

     

     

     

    。