由于最近開始要做mobile的webapp 項目，所以利用周末的時間思考了下頁面的體驗問題，我主要參考了"微信"的頁面體驗，總結主要有2個頁面切換效果（點擊進入頁面效果 和 返回上級頁面效果），以下內容的分析我默認已經有vue的開發基礎了。

最終效果如下圖：

?

?

第一步: 頁面的動態化 transition參數，是統一獲取的。

?

第二步: app來維護pageTransitions的頁面效果

?

第三步: router.map 路由配置如下，可以看到頁面做了（頭部、返回、菜單）的定制化：

?

第四步: 路由切換的事件攔截處理：

?

至此一個酷炫的頁面切換效果就完成了，呼吁開發人員應該多點個人情懷。

轉載于:https://www.cnblogs.com/Kummy/p/5723677.html

總結

以上是生活随笔為你收集整理的原创《如何用vue来轻松的驾驭 html5 webapp的页面体验》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。