1、Vue-router
(1)SPA和路由
SPA是Single Page Application,指单页面应用,在今天的web 开发中,这个单页面应用非常的普遍,在移动端的webapp中,有一半左右是基于SPA。
SPA的优缺点:
优点:
1.分离前后端关注点,前端负责view,后端负责model,各司其职;
2.服务器只接口提供数据,不用展示逻辑和页面合成,提高性能;
3.同一套后端程序代码,不用修改兼容Web界面、手机;
4.用户体验好、快,内容的改变不需要重新加载整个页面
5.可以缓存较多数据,减少服务器压力
6.单页应用像网络一样,几乎随处可以访问—不像大多数的桌面应用,用户可以通过任务网络连接和适当的浏览器访问单页应用。如今,这一名单包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。
缺点:
1.SEO问题没有html抓不到什么。。。
2.刚开始的时候加载可能慢很多
3.用户操作需要写逻辑,前进、后退等;
4.页面复杂度提高很多,复杂逻辑难度成倍
现在,我们面临着一个问题。在vue.js中,如何实现页面之间的切换呢?在vue.js中,我们可以使用组件来替代页面的概念,页面之间的切换,可以看做是组件之间的切换。
问题就回归到如何实现组件之间的切换呢?这个时候我们就要想到-----路由。
所谓的路由,就是指给定一个请求,返回相应的页面,而且,在单页应用中,路由是利用哈希(#)来实现的
vue-router就是针对vue.js实现路由的一个方案。
(2)路由的使用
![ada36ed56cda5505b18ef75c9e34b56a.png](https://i-blog.csdnimg.cn/blog_migrate/5005280a8f3b0765f7ec7514ae85bf11.jpeg)
![d54d0d4206d6fe286ac062cd0b97c333.png](https://i-blog.csdnimg.cn/blog_migrate/fc70e851d3abb1a9e6b4b1a53bf156d8.jpeg)
动态路由:
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router 的路由路径中使用“动态路径参数”来达到这个效果。
在vue-router中,要实现动态路由,从两个方面出发:
在网址中传入参数,传参的固定格式为: /路径/参数
如何在代码中接受这个参数。
在代码中接收这个参数,需要走两步:
配置路由的格式变化为: 路径/:参数,路径参数需要使用冒号“:”来标记。
当匹配到一个路由时,参数值会被设置到this.$route.params,即可以在每个组件内使用。
![5034a6bb761851d24b5633443777a349.png](https://i-blog.csdnimg.cn/blog_migrate/89f1bd151557e92446efffa896ad28c2.jpeg)
嵌套路由:
实际生活中的应用界面,通常由多层嵌套的组件组合而成。实现多层嵌套组件主要从以下两个层面着手实现
a) 视图层面中:在组件中继续使用router-link和router-view。
b) 在js代码层:使用children选项来配置子路由