記錄學習使用vue ssr框架nuxt的關鍵點

2021-10-09 04:37:21 字數 943 閱讀 8423

#1、路由

在nuxt中,不需要自己寫router.js檔案,有種約定大於配置的思想,直接在pages資料夾中建立資料夾和vue檔案,即可生成對應的router,編譯之後在.nuxt資料夾中可以看到。比如pages/admin/user/index.vue,在瀏覽器位址列可以通過localhost:埠/admin/user訪問。

#2、動態路由

動態路由的檔案需要命名為_+引數名的形式,如pages/article/_id.vue,訪問方式為localhost/article/123,此時與vue一樣,在程式中使用params即可獲取id的值為123。

#3、asyncdata方法

asyncdata方法與data()和生命週期方法同級,此方法在vue例項建立之前執行(因此不同通過this獲取vue例項),用來渲染頁面上需要seo的資料。方法入參有個context物件,具體看下面例子:

asyncasyncdata()

//這裡返回的user就是相當於在data方法裡返回的,可以通過this.user訪問

}

#4、nuxt-link標籤與a標籤

本人一開始使用nuxt-link去實現頁面跳轉,結果發現頁面跳轉非常慢,後來了解到nuxt-link是區域性重新渲染,需要等asyncdata方法獲取資料完畢之後才會跳轉頁面,所以需要使用a標籤去跳轉。那為什麼要有nuxt-link標籤呢,因為如果專案不是ssr模式,那麼為了使用者體驗,需要區域性渲染,就要使用這個標籤。

#5、created生命週期函式裡不能使用window物件

在created函式裡面,不能使用window物件,比如sessionstorage,在asyncdata同樣不能!

以上就是本人在nuxt開發學習中的主要經驗,後續還會繼續補充。

mvc框架使用記錄

最近boss剛剛讓幹活,哈哈,水了三個月自己都看不下去嘍,用到mvc框架中很小的一部分功能,心得談不上,別人的經驗貼辣麼好,算是記錄吧。mvc其實是model view controller三個單詞的縮寫,模型 展示 控制 這三個單詞其實是做了兩個分離,頁面方面,把展示和功能分離,後台方面,把資料單...

Activiti框架學習記錄 02

本篇主要是activiti工作流框架的學習記錄,以及對於該框架的基本使用和一些淺顯的理解 1 準備工作 在activiti框架學習記錄 01中已經有比較詳細的描述 提供了門面做任何操作都會需要使用到該物件 processengine processengine processengines.getd...

Activiti框架學習記錄 03

本篇主要是activiti工作流框架的學習記錄,以及對於該框架的基本使用和一些淺顯的理解 1 基本概念與名詞理解 2 知識點1 候選人操作 現在的操作因為處於學習階段都是暫時靜態資料 processengine processengine processengines.getdefaultproce...