vue-ssr,页面按需加载，权限控制

最新推荐文章于 2024-08-23 10:40:05 发布

seven-yang

最新推荐文章于 2024-08-23 10:40:05 发布

阅读量2.7k

点赞数 1

分类专栏：面试

本文链接：https://blog.csdn.net/yangyixue123/article/details/81502356

版权

本文介绍了Vue SSR的优势和核心，包括使用vue-server-renderer插件进行渲染，并讲解了动态请求数据的方法。接着讨论了页面按需加载的重要性及实现方式。最后，详细阐述了前端权限控制，包括路由控制、视图控制和请求控制，并提供了基于Vue的实现方案。

摘要由CSDN通过智能技术生成

一、功能介绍中涉及的知识

vue SSR学习

SSR:服务器端渲染（同构或者通用）
服务器把每个要展示的页面都运行完成后，将运行流直接给浏览器，所有的运算都在服务器端中完成，而浏览器只需要解析HTML即可

1.SSR和SPA

SPA：单页面应用

使用SSR的优势：

对SEO（搜索引擎优化）更加友好，
内容到达时间（time-to-content）更快，当网络缓慢时，不用等待所有js都下载完成再执行，可以让用户快速看到渲染页面。

SSR的缺点：

开发中，针对特定的浏览器，只能使用一部分生命周期钩子函数
服务器渲染应用程序时，需要在Node.js server环境运行
在node.js中渲染应用程序时，需要占用大量的CPU资源

2.SSR的核心：
通过vue-server-renderer插件的renderToString()方法，把Vue实例转换为字符串插入到html文件中。

“`
const renderer = createRenderer({
template: require(‘fs’).readFileSync(‘./index,template.html’, ‘utf-8’)
})

 renderer.renderToString(app,(err, html) => {
     console.log(html) //html是注入程序内容的部分
 })

“`

3.添加路由功能，分清服务端和客户端的范围
①：创建vue实例的引用文件夹：每次客户端请求都会创建一个新的vue实例

```
export function createApp() {
    const router = createRouter()
    const app = new Vue({
        router,
        render: h => h(App)
    })
    return app
}

```
②：对实例进行路由渲染，返回给客户端

```

export default function creatRouter(){
    let router = new VueRouter({
        mode: 'history',
        router:[
            {
                path: '/home',
                component: require('./router/home.vue')
            },
            {
                //其他引用文件
            }
        ]
    })
}

```
③：服务器端渲染部分
   server.js部分，使用了一个promise回调函数，实例创建完成后，将返回的信息传入渲染器中进行处理，处理结束后，把字符串放入html中返回给客户端

 ```
//响应路由请求
express.get('*', (req, res) => {
    const context = { url:req.url }
    // 创建vue实例传入请求路由信息
    creatApp(context).then(app => {
        renderer.renderToString(app, (err, html) => {
            if (err) {
                return res.state(500).end('运行错误')
            }
            res.send(`
              //插入HTML代码段
            `)
        })
    }, err => {
        if(err.code === 404){
            res.status(404).end('所请求的页面不存在')
        }
    })
})  
//服务器监听
express.listen(8000, () => {
   console.log('已启动')
})
 ```
 ④：创建一个新的vue实例后，通过路由的Push()方法，更改实例的路由状态。

 `