[Vue.js] 簡單登入頁面路由part1 | Vue 登入 功能
入行至今也一段時間啦,雖不是多坎坷但也沒順遂到哪去,踩坑、debug、體驗純靠北工程師上的各種職場鳥事,導致blog呈現半放置狀態都是藉口。回到正題,用Vue.js前端框架的理由很多,大概可以另外寫一篇騙文章數,是最近替公司後台頁面做重構,有機會用上現代框架,藉此寫一下開發流程,也讓這裡少長些草。使用vue-cliVue.js官方提供快速搭建工具vue-cli[1],類似React.js的creat-react-app,Github上安裝與設定文檔寫得很清楚就不贅述,設定集個人是偏好較乾淨快速、有需求套件自己再裝的webpack-simple。小黑窗輸入vueinitwebpack-si...
入行至今也一段時間啦,雖不是多坎坷但也沒順遂到哪去,踩坑、debug、體驗純靠北工程師上的各種職場鳥事,導致 blog 呈現半放置狀態都是藉口。
回到正題,用 Vue.js 前端框架的理由很多,大概可以另外寫一篇騙文章數,是最近替公司後台頁面做重構,有機會用上現代框架,藉此寫一下開發流程,也讓這裡少長些草。
使用 vue-cliVue.js 官方提供快速搭建工具 vue-cli[1],類似 React.js 的 creat-react-app,Github 上安裝與設定文檔寫得很清楚就不贅述,設定集個人是偏好較乾淨快速、有需求套件自己再裝的webpack-simple。小黑窗輸入vue init webpack-simple login 建立一個叫做 login 的專案資料夾,再安裝完裡面的套件後就能用npm run dev 讓他跑起來跑起來。
先簡單規劃一下頁面流程:
使用者會到 login 頁進行登入 登入成功後進到主畫面 主畫面包含 header 導航列,能切換主頁與使用者資訊頁,與一個登出鈕 拆分componentVue.js 很大的優點就是能將頁面 UI 元件模組化。一頁一檔、維護有方。由以上需求,我們在/src資料夾下建一個/components資料夾,裡面建立各頁面的 vue 檔長這樣:
12345└ components ├ Login.vue ├ Header.vue ├ Home.vue └ UserInfo.vue而在單頁應用SPA,達成這些頁面的切換就是路由的範疇,是該 vue-router 出場了。
路由必備 vue-routervue 官方提供 vue-router[2](文件[3]) 幫助我們實現 routing ,安裝成專案的 dependency:
定義路由個人傾向將路由規則獨立一個檔案管理,在/src資料夾下新建一個 routes.js。裡面先寫好簡單的兩個路由:
routes.js12345678910111213import Login from ./components/Login.vue;import Home from ./components/Home.vue;export const route...