第一種方式（簡單）：新建專案時用 vue-cli 手動選擇 router 安裝。

1、用鍵盤 ↓ 移動選擇第三項“ Manually select features”（手動配置）；

2、選中 Babel 和 Router （按空格 選中/取消）；

3、後三項選擇預設也可，選擇圖中所示也可；

　　a)Use history mode for router? 是否在router中用 history 模式？

　　　　router 有 history 模式和 hash 模式，hash 模式下 url 裡有#，如https://cn.vuejs.org/v2/guide/components.html#%E5%9F%BA%E6%9C%AC%E7%A4%BA%E4%BE%8B

　　b)Where do you prefer placing config for Babel、ESLint, etc.? 把配置檔案放在哪裡？

　　c）Save this as a preser for future projects? 是否儲存這個配置為以後的工程配置？

4、進入專案目錄，執行專案；

5、點選 Home 或者 About 可以切換頁面 。

demo專案目錄如下：

第二種方式：在專案路徑下安裝 vue-router、手動配置檔案

用vue-cli新建專案，選擇預設。demo2目錄如下：

此時的 package.json中沒有依賴 vue-router：

1、進入專案路徑，安裝 vue-router： npm install vue-router --save

2、vue-router 安裝完成後，package.json中自動新增 vue-router 的依賴：

3、在src下新建 router 資料夾，在 router 資料夾中新建 index.js。配置index.js：

 1 //在js中引入 Vue 和 VueRouter；
 2 import Vue from 'vue'
 3 import 'VueRouter' from 'vue-router'
 4 //使用 VueRouter；
 5 Vue.use(VueRouter)
 6 //配置 router；
 7 const routes = [ ];
 8 const router = ({
 
 9 　　routes,
10 　　mode:'history'
11 })
12 //匯出router；
13 export default router

4、配置main.js

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 //新增這一行
 4 import router from './router'
 5 
 6 Vue.config.productionTip = false
 7 
 8 new Vue({
 9 //新增這一行
10   router,
11   render: h => h(App)
12 }).$mount('#app')

5、在App.vue中使用路由

1  <template>
2    <div id="app">
3      <!--這裡顯示路由的標題-->
4        <router-link to="/">Home</router-link> |
5      <router-link to="/about">About</router-link>
6     <!--router-view 用來佔位，在router-view中展示選擇的頁面內容-->
7       <router-view/>
8   </div>
9 </template>

6、在專案路徑下執行 npm run serve 即可執行專案。