Vue路由 vue-router

首先我们了解一下spa

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。

1、Hash

如今为了更好地提升用户的使用体验，单页面应用在跳转时不会直接刷新，hash就是实现功能的一种方式，相较于history，hash是比较老的了，比如这种带#号的就是hash路由；

2、History

history的出现是为了更方便，使用的history，单页路由的url就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

然后我们来看看如何构建路由

1、动态路由

首先，在router文件夹下，我们会将所以页面的映射表同意的放在index文件中，并以数组的格式存在routes中，第一个参数为url路径，第二个为Vue页面，然后组合起来。

但是如果这么写的话，整个网站都会在访问的一瞬间全部加载，就会使页面加载速度就会变慢，所以我们应该这么将两者组合起来，这样就是当页面访问到哪个单页面时就加载对应的页面。

如果当页面跳转时我们需要带入数据的话，我们可以使用：+参数，然后再使用this.$route.params就可以将数据提取出来。

2、嵌套路由

如果当我们一个页面中还需要在跳转多个页面的时候我们该怎么办，这个时候，我们就需要嵌套路由，在对应页面加上children属性，里面的格式也是一样的

那我们该如何将子页面导出来呢，我们需要在父组件中加入router-link就可以添加子组件了。

至于三级路由，多级路由也是同理的，添加对应的children和router-link就行了

3.编程式路由

前面提到的使用router-link都是属于声明式路由，而编程式路由就需要在组件中使用this.$router.push()直接跳转到对应的

还有几种方法以后再说，此次文章概述到这里。