最近在學習使用nuxtjs框架，自己個人部落格的前端部分就是使用nuxt框架搭建的。
為什麼選擇nuxt框架？
nuxt框架
因為考慮到
seo（搜尋引擎最佳化）
，國內多數搜尋引擎蜘蛛是無法爬取到ajax獲取的內容的。
現在流行的SPA單頁面應用都是採用前後端分離的形式開發，基本採用ajax請求的方式去做資料互動，對seo很不友好。
因此需要seo的專案，要使用ssr（服務端渲染），即在後端渲染資料，多年前jsp，php等語言所寫的頁面就是服務端渲染，前後端雜糅在一起寫，或者使用模板引擎。
nuxt的使用場景
：
專案中有seo的需求，但是不想採用傳統的ssr方案，而是採用現代前後端分離的方式開發。
簡化vue開發，不需要配置太多的webpack，腳手架大部分已經幫我們做好了。
接下來就說一下nuxt中的重點：
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物件，具體看下面例子：
async asyncData（{ $axios，params }）{ let id = params。id let user = await （$。axios。$get（“http：//localhost/api/getUserById”+id））。data return { user //這裡返回的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學習的關鍵點，如有錯誤，請各位指正！
關注我，一起巧學前端！
