首先我们了解一下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()直接跳转到对应的
还有几种方法以后再说,此次文章概述到这里。