前端路由

1. npm安装路由

在创建项目的时候,将installvue-router设置为YES就实现了安装

引入路由到src目录下的router/index.js文件中

借助 vue-router，使用嵌套路由配置（实际项目中的应用界面，通常由多层嵌套的组件组合而成。URL中各段动态路径也按某种结构对应嵌套各层组件）

一、什么是路由？

　　路由是根据不同的 url 地址展示不同的内容或页面；

二、什么是前端路由？

　　前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做（传统的项目是服务端根据 url 的不同，返回不同的页面实现的）；

三、什么是后端路由？

　　通过用户请求的url导航到具体的html页面；每跳转到不同的url，都重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。

四、前后端路由优缺点对比

　　优点：

　　1.从性能和用户体验的层面来比较，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

　　2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。

缺点：

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

五、前端路由的两种实现原理

1.History API

利用H5两个新增的API history.pushState 和 history.replaceState；

缺点:不支持IE9及以下,无法做IE9的适配，所以基础智能平台未使用这种实现模式,推荐使用hash。

　2.hash

　根据监听哈希变化触发的事件 —— hashchange 事件；

六、前端路由的使用场景

前端路由更多用在单页应用上, 也就是SPA, 因为单页面应用基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

 

七、单页面与多页面应用的对比