現在很多主流的vue專案都是採用的單頁路由模式來搭建的，我們也來趕個時尚，採用的官方提供的vue-router來構建一個簡單的企業站。如果還不知道vue-router路由機制的，請右轉直走：https://router.vuejs.org/zh-cn/，先把基礎教程看一下再來實踐一下。

    官網對於vue-router的介紹如下：

用 Vue.js + vue-router 建立單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合元件來組成應用程式，當你要把 vue-router 新增進來，我們需要做的是，將元件(components)對映到路由(routes)，然後告訴 vue-router 在哪裡渲染它們。

    那麼，結合了官網提供的例子，我們需要知道的幾個知識點是：

1、router-link元件是用來跳轉路由的，to屬性是將要跳轉的路由頁地址

2、router-view元件是用來展示元件頁的

3、程式設計式導航，也就是說通過js控制跳轉路由頁

     通常我會用router.push({ path: 'register', query: { plan: 'private' }})這個來進行跳轉，這個就可以滿足我平常序曲，當然如果你的業務需求不一致，建議深入瞭解下vue-router機制

4、$route.query來獲取URL 查詢引數，例如你有一個路由地址：/detail?id=100，則有 let id= $route.query.id || -1，如果沒有查詢引數，則預設給了個-1的數值。

5、瞭解vue-router的history和hash兩種模式。確認

    好了，以上基本已經瞭解了vue-router的基礎知識，我們可以來動手實踐下了~~~

    首先，建立兩個頁面元件：home.vue和about.vue，我習慣吧頁面放入pages資料夾，因此我的src開發目錄安排如下：

assets：存放資原始檔，例如css、js、image公共檔案

components：存放公共元件，例如menu、tabBar、sideBar等元件

pages：存放頁面元件，例如首頁、關於我們、聯絡我們等頁面元件

    然後，在router/index.js和home.vue和about.vue和app.vue完善下測試資訊，如下：

    最後演示如下：

    接著，我們來測試程式設計式導航，我們在home.vue做如下修改，讓其在3s後自動跳轉到/about頁面：

    mounted是vue例項具備的一個生命週期，我的理解是當前生命週期是在dom渲染完畢後執行的，這裡我寫了個延遲執行方法。3s後自動跳轉頁面，測試如下，注意觀察地址變化：

    最後，我們來測試下查詢引數命令，這次我們在about.vue做如下修改，然後分別執行/about和/about?id=1來觀察彈窗的值，演示如下：

    以上就是我對於vue-router路由機制的瞭解，足夠滿足入場需求，未做深入瞭解，如果要構建大型專案還是要好好解讀下官方提供的api。