Nuxt.js通用 vue.jsSSR

SSR：伺服器端 VUE渲染成HTML返回瀏覽器

SEO：VUE SPA（單頁）新聞搜尋引擎

比較SPA載入較快

因為新聞部落格都需要搜尋引擎抓取內容，大量的流量來自於伺服器端的渲染如果使用vue製作該類網站的話那麼有可能只能抓取到首頁，那麼我們就需要使用伺服器端端的渲染SSR來進行網站的搭建。以前的J2EE和PHP也是伺服器端渲染但是後來因為大前端的趨勢SPA勢不可擋所以就將前端拆開。

安裝nuxt.js 

Nuxt的目錄結構

在package.json可以配置埠等在nuxt.config.js可以配置全域性的一些配置上面有一頁meta標籤啊，link小圖示和reset全域性的css樣式，當然也可以配置webpack的打包配置包括一些將圖片打包在一個固定的目錄下等等操作。

css:['~assets/css/reset.css'],

這個是一個載入css的程式碼，波浪線代表跟目錄以後會經常用到這種別名。

 路由

       關於nuxt的路由是框架封裝好的，他會根據你的目錄路徑自動生成下面看一下我們的寫法：

首先在預設pages下面的index.vue檔案進行修改

我們的目錄的結構是這樣的，當然根據nuxt的官網並不推薦a標籤來寫而是使用nuxt-link的元件類似於router-link並且可以傳遞引數到路由頁面例子如下

這種寫法可以將該頁面的引數傳遞到路由的頁面，在這個頁面可以接收到這個引數，在寫VUE頁面中會經常有這樣的需求，比如你需要點選進入一個新聞頁面，需要獲取這個新聞頁面的id然後通過這個ID去後臺獲取這個新聞的相關資料進行渲染。

下面講一下動態路由

       動態路由可以說是一個常用的東西，首先你需要寫一個以下劃線加引數名稱為命名方式的檔案_id然後這裡面寫入新聞的內容頁結構和程式碼如下

下面是主頁面上面是內容頁

可以發現我在內容頁寫了一個validate的函式這個函式接受了路由的引數params我們需要驗證params的id的內容比如如果是全部為資料的話就可以正常跳轉，就需要return出這個正則表示式，可以發現我洗了兩個新聞頁的跳轉，一個寫的id是123另一個寫的是jackyfgh那麼123的可以正常接收並跳轉另一個頁面會跳轉到nuxt準備好的404頁面。

如下圖所示：

404頁面

正常的頁面