前端系列——vue路由 vue路由详解

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）路由的使用

动态路由：

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在vue-router 的路由路径中使用“动态路径参数”来达到这个效果。

在vue-router中，要实现动态路由，从两个方面出发：

在网址中传入参数，传参的固定格式为： /路径/参数

如何在代码中接受这个参数。

在代码中接收这个参数，需要走两步：

配置路由的格式变化为： 路径/:参数，路径参数需要使用冒号“:”来标记。

当匹配到一个路由时，参数值会被设置到this.$route.params，即可以在每个组件内使用。

嵌套路由：

实际生活中的应用界面，通常由多层嵌套的组件组合而成。实现多层嵌套组件主要从以下两个层面着手实现

a) 视图层面中：在组件中继续使用router-link和router-view。

b) 在js代码层：使用children选项来配置子路由