nuxt 服务端渲染

nuxt 服务端渲染

1 nuxt 生命周期

1.1 服务端生命周期

middleware , plugins , validate 比较特殊，算成生命周期？？？
服务端生命周期中, 无法拿到window对象

nuxtServerInit()

middleware 中间件

• 全局中间件

// nuxt.config.js
// 使用
export default {
   
    serverMiddleware: [
        // string 形式中间件对应middleware文件夹中文件名
        'string',
        // 对象path形式，针对路由
        {
   
            path: '/api',
            handler: '../components/index.vue'
        }
    ]
}
// middleware
// 定义
export default function(req, res, next) {
   
    // req http request
    // res http response
    // next 调用下一个中间件函数 next() 
    // express 相似的99%
}

• 页面中间件

// page/index.vue
// 使用 
export default {
   
    middleware: 'middleware-name'
}

plugins 插件

• 工具方法？？？ axios，element-ui之类的

// nuxt.config.js
// 使用
export default {
   
    plugins: [
        './plugins/request.js'
    ]
}
// plugins/request.js
// 定义
// 没有固定格式~~~

validate 校验

• 动态路由校验参数

// 找不到其他使用场景
// false 将会跳转到错误页
// true 放行
return false | true

以下服务端生命周期无法拿到vue实例this对象

1.1.1 asyncData()

• 主要数据获取位置，用于初始服务端渲染的数据
• return的数据将会加载到data方法中

1.1.2 fetch()

• 执行顺序在created之后，但是在服务端执行的
• return的数据将会加载到data方法中

1.2 客户端生命周期

1.2.1 beforeCreate()

• 特殊(介于服务端和客户端之间)
• 还未实例化无法拿到data数据

1.2.2 created()

• 特殊(介于服务端和客户端之间)

1.2.3 beforeMount()

1.2.4 mounted()

• 次要数据获取位置(客户端渲染)

1.2.5 beforeUpdate()

1.2.6 updated()

1.2.7 activated 失效

• 由于是服务端渲染，所以不支持组件的keep-alive，那自然activated、deactivated这两个生命周期也没了

1.2.8 deactivated 失效

• 由于是服务端渲染，所以不支持组件的keep-alive，那自然activated、deactivated这两个生命周期也没了

2 router 路由

• 采用了约定式路由
• 以pages为根 /
• 没有vue的路由表

2.1 路由守卫

plugin 形式路由守卫

/* 全局路由守卫 */
export default ({
   
    app
}) => {
   
    /* 前置路由守卫 */
    app.router.beforeEach((to, form, next) => {
   
        next()
    })
}
/* 后置路由守卫... */
...

middleware 形式路由守卫

import Cookie from 'js-cookie'
/* 主要是判断token  cookie */
export default function({
   
    route,
    req,
    res,
    redirect
}) {
   
    const isServer = process.server
    const isClient = process.client
    if (isServer) {
   
        /* 服务端 */
        let cookie = getCookiesInServer(req)
    }
    if (isClient) {
   
        /* 客户端 */
        let cookie = getCookiesInClient('token')
    }
}
//获取服务端cookie
function getCookiesInServer(req) {
   
    let service_cookie = {
   };
    req && req.headers.cookie && req.headers.cookie.split(';').forEach(function(val) {
   
        let parts = val.split('=');
        service_cookie[parts[0].trim()] = (parts[1] || '').trim();
    });
    return service_cookie;
},
//获取客户端cookie
function getCookiesInClient(key) {
   
    return Cookie.get(key) ? Cookie.get(key) : ''
}

2.2 路由视图

<!-- 挖个坑等着填 -->
<nuxt />

<!-- 这个坑... -->
<nuxt-child />

2.3 路由跳转

nuxt-link更多用法参考vue-router

<nuxt-link to="/index/:id" />
<!-- tag='li' 废弃？？？ -->
<nuxt-link :to="{path:'/index',params:{id:xxx}}，query:{id:xxx}" active-class="active-class" />

• 编程式导航

/* 服务端 */
asyncData({
   
    redirect
}) {
   
    redirect(path)
}
/* 客户端 */
this.$router.push()
this.$router.replace()

2.4 扩展路由

2.4.1 resful 风格传参 + 扩展路由

// 引用单个扩展路由
export default {
   
    router: {
   
        // 扩展路由  path.resolve 用于路径拼接
        extendRoutes(routes, resolve) {
   
            routes.push({
   
                path: '/index',
                name: 'index',
                component: resolve(__dirname, 'pages/index.vue')
            },{
   
                // 无法采用_id_type.vue 解析id和type
                // 无法采用_.vue 解析id和type
                // 手动扩展resful风格路由
				path:'/test/:id/:type',
                name:'test',
                component: resolve(__dirname,'page/test.vue')
			})
        }
    }
}

// 封装成路由表的形式
import path from 'path'

// 组成完整路径   process.cws() 拿到项目运行时路径  __dirname 刷新丢失
const resolve = (path) => path.resolve(process.cws(), `./${
     path}`)

export const $routes = [{
   
        path: '/',
        name: 'Home',
        component: resolve('pages/home/index.vue'),
        meta: