從一次執行錯誤開始

html程式碼

<div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/about">關於我們</router-link>

    <router-view></router-view>
</div>

當然了這個HTML程式碼時沒有問題的，大家也可以再vue-router的文件上看到相應的程式碼。重點在下邊的js程式碼部分，這部分對於第一次接觸vue-router的人大部分會遇到吧。
js程式碼

 // 1. 定義（路由）元件。
 const Foo = { template: '<div>foo</div>' }
 const Bar = { template: '<div>bar</div>' }

 // 2. 定義路由
 const routes3 = [
     { path: '/home', component: Foo },
     { path: '/about', component: Bar }
 ]

 // 3. 建立 router 例項，然後傳 `routes` 配置
 const router4 = new VueRouter({
     routes3 
 })

 // 4. 建立和掛載根例項。
 

 const app = new Vue({
     router4
}).$mount('#app')

執行錯誤說明

執行以上例項然而介面顯示為空白，什麼都沒有。what！這個不對吧。然而開啟開發者模式後再來看看，錯誤提示如下：

錯誤分析

其實這個是按照官方的寫法寫的，一般如果喜歡搞得程式設計師才會遇到。那麼為什麼會出現這樣的錯誤呢？
因為在官方第2步和第3步總的常量的命名其實是有規則的。
官方的路由定義和路由例項的名稱分別是：routes和router
但是我們以為這兩個可以隨便變所以寫成了自己喜歡的名稱。這樣寫之後其實在例項化路由例項和應用例項時要有變化：

const
 
 router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

這兒為什麼可以直接將路由定義陣列傳入VueRouter中呢？因為例項中對路由定義的陣列的命名是routes。註釋中寫了routes相當於routes：routes
那麼如果我們的路由定義陣列名稱不是routes當然是不能使用簡寫的。就要乖乖的寫成 routes:routes3或其他方式routes3不一定是你自己的路由定義陣列名稱，請替換成自己的就行

const app = new Vue({
  router
}).$mount('#app')

同理官網上載例項化vue物件時直接傳入路由例項，為什麼可以這樣傳呢？同樣是因為路由物件命名為了router。
如果你的VueRouter的例項名稱為router4那麼你在例項化時乖乖的寫成router:router4這樣
好了這只是個簡單的踩坑的過程，比較小兒科，望大神略過。