技術 Vue Router 學習筆記

建立 router 安裝 vue-router npm install vue-router --save 建立 routes.js ，用來設定 ro...

技術 Day 25：從頭開始的 Scroll Behavior

目前導覽項目頁面愈來愈完整，相對有愈來愈多小細節需要留意，尤其是資料量變多時，許多瀏覽時伴隨的滾動效果多少會影響使用者體驗，因此除了顧及版面資料和操作功能，UX...

技術 Day 24：路由搜查隊－route.query

目前我們實現了即時搜尋顯示書名相符的書單資料，但是當我切換到其他路由之後又想再回到上一頁的搜尋結果，或是直接在當前路徑重新整理頁面時，搜尋欄位就被清空了，而書單...

技術 Day 21：總匯複習－Vuex、Route

前幾篇介紹了 Vuex 管理資料狀態，以及在生命週期或導航守衛發送 API 的時機點，再次回到專案範例，目前已處理好顯示導覽列中的全部書單內容，我們接續完成其他...

技術 Day 20：全域、路由、元件內－Navigation Guards

之前有預告過，發送 API 的時機點需視不同情境及 UX 體驗規劃而定，因此除了選擇在元件內的生命週期 created 發送，另外在 Vue Router 還有...

技術 Day 14：動態 Route 對號入座

上篇完成了巢狀路由的設置之後，緊接著新需求又出現了！接續會員後台的收藏紀錄頁面，我們要進一步讓收藏的書單可以被購買： 點擊收藏紀錄中的單筆書目資料時，會進入購...

技術 Day 13：巢狀路由的孩子－Nested Routes

目前設定的 Navbar 路由架構還算單純，並且只有單層路徑，但是當專案規模愈來愈大、功能類別拆分的愈趨詳細時，整體網站就相對需要更具層級性的規劃，此時路由架構...

技術 Day 12：Router 繞去哪－active-class & exact-active-class

上篇我們為 Navbar 設定好路由之後，接下來的需求則是希望能夠讓選取效果更為明顯，優化使用者體驗： hover 項目時，字體顏色顯示為紅色 ⇒ 跟隨游標移...

技術 Day 11：Router 怎麼繞－router-link、router-view

大家應該也發現到了，目前點選 Navbar 項目並沒有任何反應；但是點選公版中的 Home 和 About 時： 點選 About，網址跳轉至「 http:/...

技術 Day 05. F2E-首頁開發

今天要來實作首頁的部分應該會有人覺得很奇怪，為什麼SSO會需要首頁? 做登入頁就好了吧? 需要首頁的原因是這樣的 你就做的跟Google一樣就好了！！ 而...