路由ssr服务器信息不完整,基于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服务

微信打赏

支付宝打赏