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

已有20条评论

  1. 游客 648

    来学习一下大佬的骚操作

    2023-06-02 14:49 回复
  2. 沐野

    Nuxt的非常不错

    2022-10-24 11:41 回复
  3. 香水香精

    已打赏

    2021-08-03 15:11 回复
  4. 商标授权速卖通

    纯顶。不过内容很好

    2021-07-18 06:35 回复
  5. 游客 947

    文章好专业,博主好棒

    2021-03-03 18:15 回复
  6. 招标中标

    好厉害的样子,棒棒哒

    2020-12-17 17:39 回复
  7. 新闻头条

    文章不错非常喜欢,支持一下吧

    2020-03-03 01:05 回复
  8. 波克棋牌

    666学习了

    2020-02-27 14:05 回复
  9. 今日新闻

    文章不错支持一下吧,支持

    2020-02-01 00:43 回复
  10. 糖果站

    非技术的路过,但是怕以后有用的着的地方还是果断收藏了,地址是:www.tgz.com 糖果站

    2019-12-23 11:25 回复
  11. 今日新鲜事

    文章不错支持一下吧

    2019-12-21 00:48 回复
  12. 今日头条

    文章不错支持一下吧

    2019-10-08 00:51 回复
  13. 137博客

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

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

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

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

    朴素的人

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

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

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

    Nuxt的非常不错

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

    非技术的路过。

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

    文章不错非常喜欢

    2019-08-07 01:00 回复

(必填)

(必填)

(可选)