基于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服务》二维码
  • 微信打赏
  • 支付宝打赏

已有7条评论

  1. 137博客

    文章写的还可以,我基本上看完了,谢谢分享

    2019-08-21 19:01 回复
  2. 137博客

    写什么都不重要,因为写什么都有人看。贵在坚持,谢谢分享

    2019-08-20 14:39 回复
  3. 武陵红苗

    朴素的人

    2019-08-16 16:32 回复
  4. 澳门ktv

    走走看看,来来往往,欢迎回访!

    2019-08-14 21:22 回复
  5. 超人下拉系统

    Nuxt的非常不错

    2019-08-13 13:58 回复
  6. repostone

    非技术的路过。

    2019-08-08 16:48 回复
  7. 头条新闻

    文章不错非常喜欢

    2019-08-07 01:00 回复

(必填)

(必填)

(可选)