Vue - 路由

新建页面，建立路由是常常要作的事，而我老是站在前人的基础上，简单粗暴看下官网的教程，按着他们的格式建立和增长，本身建立项目也是看着教程走，不肯多动脑子去好好想一想，因此某些概念老是模棱两可和记不住。

（1）前端中的路由是什么？

  简单来讲就是根据不一样的 url 地址展现不一样的内容或页面

（2）用于什么场景？

  前端路由更多用在单页应用上, 也就是SPA（单页应用程序）, 由于单页应用, 基本上都是先后端分离的, 后端天然也就不会给前端提供路由。

（3）什么是单页应用？

  SPA是一种特殊的Web应用。它将全部的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，SPA不会由于用户的操做而进行页面的从新加载或跳转，而是利用JavaScript动态的变换HTML，实现UI与用户的    交互。与单页应用相呼应的是多页应用。

（4）什么是多页应用？

  每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫作多页应用。

（5）单页应用与多页应用的比较

                                       单页面应用                                                                             多页面应用                            

组成                           一个外壳页面和多个片断页面组成                                        多个完成的html页面组成

页面跳转                     片断页面之间的切换，共用外壳页面                                     从一个完整的页面跳转到另一个完整页面

刷新方式                     页面片断的局部刷新                                                          整页刷新

url模式                      http://xxx/flight.html                                                     http://xxx/flight/page1

用户体验                     页面间片断切换快，用户体验好                                           页面间切换慢，不流畅，用户体验差

页面间数据传递            依赖从url提取参数，cookie，localStorage等，较麻烦            在一个页面内，页面片断间传递数据容易

 

以上为参考大部分博客总结的某些概念性东西，vue中路由的使用规则接着往下走：

(1) 基本案列

(2) 动态路由匹配

某种模式匹配到的全部路由全都映射到同个组件。例如，一个 User 组件，对于全部 ID 各不相同的用户，都要使用这个组件来渲染。那么，经过在vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 。

const router = new VueRouter({ routes: [ // 动态路径参数以冒号开头
    { path: '/user/:id', component: User } ] })
像  和  都将映射到相同的路由
/user/fooID1/user/fooID2

此外能够经过this.$route.params.id取得用户的ID值,例如：

/user/:id                       

匹配路径为 /user/fooID1时， 此时this.$route.params = {id: 'fooID1'}

/user/:id/name/:name     

匹配路径为/user/fooID1/name/yang时， 此时this.$route.params = {id: 'fooID1', name: 'yang'}

 

还有一个经常使用的this.$route.query.id从url中查询参数，例如：

 /flights/id="foolD1"

 此时this.$route.query.id值为fooID1