基于Nuxt構建動態路由SSR服務打賞

大約兩年前曾經分享過基于Vue的SSR框架Nuxt的簡單使用《基于Vue.js的SSR方案之Nuxt.js》,今天因為有SSR需求又重新做了一些嘗試。

由于目前在做的是一個能夠動態構建頁面的平臺產品,當前現狀是構建產物全為靜態資源,路由由前端渲染,且為動態創建。也由于眾所周知的原因,國內網站不做SSR基本不可能被搜索引擎收錄,于是有了此文,簡單記錄一下結合Nuxt和Vue做的一些嘗試。

我們都知道,以往做SSR,頁面路徑、TDK等信息可能根本不需要特殊處理,而我們現狀是產出物根本沒有友好的頁面路徑與TDK(因為前期主要考慮業務系統,路徑大多隨機生成)。解決了以上問題之后,考慮產品產出物現狀是通過數據動態創建路由,而Nuxt默認則是通過約定大于配置的形式,創建文件夾即路由,又碰到問題。

帶著問題找方案,重新翻閱Nuxt文檔,發現有_.vue做完全匹配的形式,有點類似vue-router的通配符——*,既然路由入口不能動態創建,是不是直接全匹配再渲染?考慮到目前的動態路由在最初也考慮過通過通配符的形式進行匹配,但因為這樣支持不了以路由name進行跳轉,轉而選擇了動態添加路由規則。介于暫時沒有更好的方案,就再次對通配符的方式進行嘗試,發現想法基本行得通,但根據name跳轉的需求還需要結合數據進行path=>name的映射,好在SSR的形式可以在頁面加載完之前就把映射關系輸出到組件,效率基本沒有損耗,后續針對路由跳轉方法做一些攔截處理即可,這里不再贅述。

解決了動態路由問題,就是頁面內容,我們頁面內容是由后臺數據決定,所以這里又祭出Nuxt的asyncData,前置做請求,然后打入組件,頁面結構不固定,根據得到的數據,進行render渲染(取代靜態template),后續就是一些額外信息的注入等,下面是示例代碼。

export default {
    head() {
        return {
            title: this.path,
            meta: [
                { hid: 'keyword', name: 'keyword', content: '測試關鍵字' },
                { hid: 'description', name: 'description', content: '測試描述' }
            ]
        }
    },
    asyncData({ req }) {
        return Promise.resolve({
            meta: {
                views: [
                    {
                        name: 'about',
                        path: '/about',
                        body: 'test'
                    },
                    {
                        name: 'index',
                        path: '/index',
                        body: 'index'
                    }
                ]
            },
            path: req.url
        })
    },
    computed: {
        view() {
            return this.meta.views.find(view => view.path === this.path)
        }
    },
    render(h) {
        return h('div', this.view.body)
    }
}

啟動服務,訪問地址http://localhost:3000/about,得到如下結構

Nuxt 動態路由 about

訪問地址http://localhost:3000/index,得到如下結構,似乎滿足了我們的訴求

Nuxt 動態路由 index
基于Nuxt構建動態路由SSR服務
文章《基于Nuxt構建動態路由SSR服務》二維碼
  • 微信打賞
  • 支付寶打賞

已有6條評論

  1. 137博客

    寫什么都不重要,因為寫什么都有人看。貴在堅持,謝謝分享

    2019-08-20 14:39 回復
  2. 武陵紅苗

    樸素的人

    2019-08-16 16:32 回復
  3. 澳門ktv

    走走看看,來來往往,歡迎回訪!

    2019-08-14 21:22 回復
  4. 超人下拉系統

    Nuxt的非常不錯

    2019-08-13 13:58 回復
  5. repostone

    非技術的路過。

    2019-08-08 16:48 回復
  6. 頭條新聞

    文章不錯非常喜歡

    2019-08-07 01:00 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖