基于Vue的SSR框架Nuxt的简单使用

由于目前在做的是一个能够动态构建页面的平台产品，当前现状是构建产物全为静态资源，路由由前端渲染，且为动态创建。也由于众所周知的原因，国内网站不做SSR基本不可能被搜索引擎收录，于是有了此文，简单记录一下结合Nuxt和Vue做的一些尝试。

我们都知道，以往做SSR，页面路径、TDK等信息可能根本不需要特殊处理，而我们现状是产出物根本没有友好的页面路径与TDK（因为前期主要考虑业务系统，路径大多随机生成）。解决了以上问题之后，考虑产品产出物现状是通过数据动态创建路由，而Nuxt默认则是通过约定大于配置的形式，创建文件夹即路由，又碰到问题。

带着问题找方案，重新翻阅Nuxt文档，发现有_.vue做完全匹配的形式，有点类似vue-router的通配符——*，既然路由入口不能动态创建，是不是直接全匹配再渲染？考虑到目前的动态路由在最初也考虑过通过通配符的形式进行匹配，但因为这样支持不了以路由name进行跳转，转而选择了动态添加路由规则。介于暂时没有更好的方案，就再次对通配符的方式进行尝试，发现想法基本行得通，但根据name跳转的需求还需要结合数据进行path=>name的映射，好在SSR的形式可以在页面加载完之前就把映射关系输出到组件，效率基本没有损耗，后续针对路由跳转方法做一些拦截处理即可，这里不再赘述。

解决了动态路由问题，就是页面内容，我们页面内容是由后台数据决定，所以这里又祭出Nuxt的asyncData，前置做请求，然后打入组件，页面结构不固定，根据得到的数据，进行render渲染（取代静态template），后续就是一些额外信息的注入等，下面是示例代码。