一玛追、路由配置
對(duì)于這個(gè)只有5個(gè)頁面的mini 項(xiàng)目來說，路由配置也是相當(dāng)簡單的。 在router 目錄下index.js中，引入必要的模塊 :
a. 主模塊Vue
b. 路由模塊（vue-router）
已經(jīng)自定義目錄——pages下面自己編寫的頁面組件芹橡，文中項(xiàng)目就簡簡單的5個(gè)頁面
a.首頁（Home.vue）
b.用戶信息頁面（Comstomers.vue）
c.充值記錄頁面（Charge.vue）
d.訂單記錄（Order.vue）
e.登錄頁（Login.vue）
代碼如圖：
Vue 中默認(rèn)的路由模式是hash 模式, 使用 URL 的 hash 來模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)望伦，頁面不會(huì)重新加載林说。當(dāng)然你也可以使用 history mode—— h5 history.pushStateAPI來完成url跳轉(zhuǎn), 設(shè)置路由模式只需要在 路由實(shí)例對(duì)象中的mode 屬性 設(shè)置成 'hash' 或者'history’.?
vue路由中可以配置動(dòng)態(tài)路徑參數(shù)，以冒號(hào)開頭屯伞，形如：{ path:'/user/:id', component: User }腿箩， 參數(shù)值可以用 this.$route.params 訪問到。劣摇。詳細(xì)的路由說明珠移，請(qǐng)自行去vue官網(wǎng)看文檔vue-router 官方文檔
配置好路由之后，在命令行執(zhí)行 'npm run dev' 啟動(dòng)應(yīng)用， 本文使用的項(xiàng)目默認(rèn)會(huì)跳轉(zhuǎn)到一個(gè)微信授權(quán)頁面（Auth）, 該頁面調(diào)用后臺(tái)給的登錄狀態(tài)的接口處理頁面的跳轉(zhuǎn)剑梳。唆貌。如果已經(jīng)登錄過滑潘，會(huì)直接進(jìn)入首頁垢乙，否則進(jìn)入登錄頁。语卤。
路由配置好之后追逮，就可以開始一個(gè)一個(gè)頁面擼了。粹舵。
本文的demo中用到了sass, 所以事先把sass loader钮孵， style-loader 裝上去，然后再在webpack.base.config 進(jìn)行配置眼滤。巴席。。
