Day 21 - Vue Router基本概念(1)

如同我们前面几天提到的，Vue的核心是用来处理状态、版面、以及元件的逻辑。 但是当整个网站逐渐发展成为应用程序的时候，Vue的元件或是切换页面若要使用原本我们所熟悉的 v-if、v-else，就会让整体的程序逻辑变得复杂且不易维护。

我们今天要介绍的 Vue Router ，作为 Vue 框架生态圈的一部分，弥补了 Vue.js 核心薄弱的部分， 除了前面提到控制元件的切换逻辑之外，还能搭配前端路由机制来操作浏览器上/下一页的流程， 这使得 Vue.js 也有了能够建立 SPA 完整单页式应用的能力。

不过基本上框架都具备处理Router的能力，像是Grant有用过PHP的Laravel框架、node.js的Express框架及Python的dijango，基本上路由的处理都是大同小异。

而至於甚麽是路由，基本上可以用大家常用的FB来举例，例如，当我点到个人档案的page时页面显示为:

facebook/profile?xxxx

而连到Facebook watch又变成
facebook/watch/xxx

像这样，浏览器透过不同的网址，向後端的网页服务器发送请求 (Request)，而服务器接收到浏览器的请求後， 回应对应的内容给浏览器来渲染，这样的机制我们就称为网站路由 (Routing) ，管理网站路由的程序通常会被称作 Router。

vue-router就像是一个中层，会负责消化传递来的Request，并决定要传递请求到哪个页面(html或是.vue样板)。