大约两年前曾经分享过基于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