大家好，我是一葉，今天是七夕，單身狗的我還在這里寫踩坑文。在這里還是要祝大家早日脫單（能不能脫單自己心里沒個數嗎）。本篇繼續踩坑，在單頁面上展示多頁的內容，大家的想法是什么，估計大家第一印象會是iframe框，但是iframe的缺點大過優點，在vue中也是放棄使用的。vue中引入了router的觀點，從而實現單、多頁面的跳轉，接下來進入正文。
首先使用vue-cli腳手架搭建項目，不會的小伙伴可以查看往期文章：vue學習【番外篇】vue-cli腳手架的安裝 ，使用vue-cli搭建好項目的話，我們就不需要單獨去下載、引入router。已經搭建好項目的小伙伴繼續往下看。
此時項目的目錄結構如圖1所示。
圖1
vue-cli搭建項目的小伙伴接下來這段可以略過。
如果是使用hbuilderx的小伙伴使用默認搭的項目不含router，那得在src目錄下創建router目錄，並創建router.js，然后打開命令行面板輸入命令行：
npm install vue-router
下載完之后在main.js中引入router.js,引入代碼如下：
import router from '@/router/router.js'
Vue.use(Router)
在main.js中，代碼如圖2所示。
圖2
現在我們到App.vue里寫點東西，當我們引入的是單頁面的話，代碼如圖3所示。
圖3
在router.js中，代碼如圖4所示。
圖4
當多個頁面時怎么引入呢，這個很簡單，在APP.vue的路由標簽里寫上name，在路由表（router.js）中聲明一下就行了。App.vue中代碼如圖5所示。
圖5
router.js中代碼如圖6所示。
圖6
目前為止router的多頁面跳轉思路就是這些了，因為代碼簡單，大家就手敲吧，敲個一兩遍就能記住了。
為了讓大家能更直觀地感受到router的魅力所在，我可是連七夕都不過，來給你們苦逼地擼代碼（沒人一起過七夕，心里沒個數？），最終效果圖如圖7所示。
圖7（點擊查看大圖）
到圖6的時候大家已經可以寫自己的頁面跳轉了，如果大家對圖7的跳轉和頁面布局感興趣的同學可以打開下方的鏈接進行下載，記得cnpm install，畢竟這個依賴是真的大，上傳下載都不好，自己本地下載依賴就好。
百度雲盤鏈接：https://pan.baidu.com/s/1m76ew5lZCSU0VF9mcQz1uA
提取碼：3ms6
github：https://github.com/520liuhong/vue-router
如果對你有幫助，就到git上給我個star喲。