建立vue專案的時候，直接在HBuilder X裡建立會沒有router目錄，要從cmd裡建立。

建立一個vue專案

執行 vue init webpack my-project 注意（my-project）是自己的專案名

回車既可，等待載入配置

注意y表示yes，n表示no

？ Project name (my-project ) 敲y, 回車既可

？project description ( A Vue.js project ) 敲回車既可

？Author ( xxxxxx [email protected] )敲回車既可

？ Vue build ( user arrow Keys )敲回車既可

? Install vue-router？（Y/n）敲Y回車既可 （是否安裝路由）

？Use ESLint to lint your code？ (Y/n)敲n回車既可（是否安裝路由）

？Set up unit tests (Y/n)敲n回車既可 ( 單元測試，個人覺得不安裝選擇n)

？Setup e2e tests with Nighwatch？(Y/n) ( e2e測試，個人覺得不安裝選擇n )

？Should we run npm install for you after the project has been created？ (recommended) (use arrow Keys)

這裡是選擇安裝方式

等待安裝即可

npm run dev 執行
使用webpack建立vue專案時，會提示:install vue-router?(Y/N)，下面講一下區別：

首先說一下路由是做什麼的？

構建 SPA (單頁應用) 時，方便渲染你指定路由對應的元件。你可以 router-view 當做是一個容器，它渲染的元件是你使用vue-router指定的。

1、安裝vue-router：

專案的src目錄下會多出一個router資料夾，且App.vue的內容是這樣的：

多出一對標籤，router-view標籤主要是將路由路徑所指定的元件渲染到頁面中，此時可以將所有的路由路徑寫在router資料夾裡的index.js裡，實現在url上輸入不同的路徑從而渲染不同的元件。

2、不安裝vue-router
專案的src目錄下會沒有router資料夾，且App.vue的內容是這樣的：

如果要實現上面的路由的話，需要先使用npm install vue-router --save安裝vue-router到node-modules，此時可以把路

由路徑寫入mian.js裡，或者重新建立router資料夾，但需要修改App.vue裡的內容，新增

標籤。

原文連結：https://blog.csdn.net/style_zyh/article/details/74321612

vue router中hash和history
坑：路徑沒錯但是載入不出來？漏掉#！預設hash，沒有#載入不出來！
在routes前一行補上 mode:'history',