首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

VueJS 2.0服务器端渲染:如何使用preFetch和beforeRouteEnter只获取一次数据?

VueJS 2.0是一款流行的JavaScript前端框架,而服务器端渲染(Server-side rendering,SSR)是将VueJS应用程序的首次渲染在服务器端完成,然后将渲染好的HTML响应发送到浏览器端的技术。

在VueJS 2.0服务器端渲染中,可以通过preFetch和beforeRouteEnter来实现只获取一次数据的功能。

  1. preFetch: preFetch是一个用于数据预取的钩子函数,它可以在组件渲染之前调用。我们可以在这个钩子函数中执行异步操作,例如发送网络请求来获取数据。preFetch钩子函数将会在服务器端渲染(SSR)时调用,并且在数据预取完毕后,将数据存储在组件实例的store属性中。

下面是一个示例代码:

代码语言:txt
复制
// 在组件中定义 preFetch 钩子函数
export default {
  preFetch() {
    // 发送网络请求获取数据
    return fetchData().then((data) => {
      // 将获取到的数据存储到组件实例的 `store` 属性中
      this.$store.commit('setData', data);
    });
  }
}

在这个例子中,我们定义了一个preFetch钩子函数,它通过发送网络请求来获取数据,并将获取到的数据存储在组件实例的store属性中。

  1. beforeRouteEnter: beforeRouteEnter是Vue路由守卫中的一个钩子函数,它可以在路由即将进入组件的时候调用。我们可以在这个钩子函数中执行一次性的操作,例如获取数据。不同于preFetch钩子函数,beforeRouteEnter并不会在服务器端渲染(SSR)时调用。

下面是一个示例代码:

代码语言:txt
复制
// 在路由配置中定义 beforeRouteEnter 钩子函数
beforeRouteEnter(to, from, next) {
  fetchData().then((data) => {
    // 将获取到的数据传递给 next() 函数的回调参数中
    next((vm) => {
      vm.$store.commit('setData', data);
    });
  });
}

在这个例子中,我们定义了一个beforeRouteEnter钩子函数,在路由即将进入组件之前获取数据,并将获取到的数据传递给next()函数的回调参数中,然后再通过回调函数将数据存储在组件实例的store属性中。

这样,无论是使用preFetch还是beforeRouteEnter钩子函数,我们都可以实现只获取一次数据的功能。

腾讯云提供的相关产品和服务中,推荐使用云函数(Serverless Cloud Function)和云数据库(TencentDB)来实现数据的获取和存储。

  • 云函数:云函数是一种事件驱动的服务器端计算服务,可以帮助我们在云端运行代码逻辑。我们可以在云函数中编写获取数据的逻辑,并将获取到的数据存储在云数据库中。腾讯云云函数的详细介绍和使用方法可以参考腾讯云云函数产品页
  • 云数据库:云数据库是一种高性能、可扩展的在线数据库服务,可以帮助我们存储和管理数据。我们可以将获取到的数据存储在云数据库中,并在需要的时候从云数据库中读取数据。腾讯云云数据库的详细介绍和使用方法可以参考腾讯云云数据库产品页

以上是关于VueJS 2.0服务器端渲染中如何使用preFetch和beforeRouteEnter只获取一次数据的解答。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vue2.x入坑总结—回顾对比angularJSReact的一统

componentWillMount() 组件初始化时调用,以后组件更新不调用,整个生命周期调用一次,在客户端也在服务端,此时可以修改state。...这个相当于 vue  mounted componentDidMount()() 组件渲染之后调用,调用一次在客户端。...指令周期 bind:调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。...慎用,如果在指令里绑定事件,并且用这个周期的,记得把事件注销 componentUpdated:被绑定元素所在模板完成一次更新周期时调用。 unbind:调用一次, 指令与元素解绑时调用。...另外一个列表渲染的时候的有一个性能的小技巧: 如果数组中本身自带一个唯一的标识 id ,那么在渲染的时候,通过trace-by给数组设定唯一的标识,这样vuejs渲染过程中会尽量重复原有对象的作用域

1.2K20

VueRouter导航守卫

路由独享守卫顾名思义在定义路由路由组件中的对象中使用,其只有一个阶段beforeEnter。...组件内守卫是在组件中触发的路由内容,其有三个阶段依次是beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。...组件前置守卫 在还没有进入该组件之前触发,在渲染该组件的对应路由被confirm前调用,此时不能获取组件实例 this,因为当守卫执行前,组件实例还没被创建,但是可以通过传一个回调给next来访问组件实例...组件更新守卫 组件更新守卫在动态路由中使用,由于动态路由中切换路由的时候,由于绑定的是同一个组件因此在不会在重新渲染,但是为了可以让组件中的内容重新渲染,有两种方法第一种使用watch监听,这种需要使用...props写法,另一种就是在beforeRouteUpdate中定义,其会监听到动态路由的改变,因此可以在这个钩子中获取异步动态路由对应的数据,举例来说,对于一个带有动态参数的路径/example/:id

1.4K30
  • # Vue-router 原理解析

    url,渲染相对应的组件 兼容到 IE10 无惧前进后退,就怕 F5 刷新,可能会出现 404,所以需要后端配合,使用 Koa 的中间件 connect-history-api-fallback——参考链接...abstract 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。...通过 mixin 的方式,在 beforeCreate destroy 中将逻辑混入在每一个组件上 监听路由改变使用的是 Vue 的双向绑定 然后给 Vue 原型上设置routerroute两个属性...$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, params, query 等属性。...,切换完毕后会把目标线路更新替换当前线路,这样就会作为下一次的路径切换的依据。

    30931

    vue-router详解及实例

    有时候,进入某个路由后,需要从服务器获取数据。...导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。 该方式会马上导航渲染组件,然后在组件的 created 钩子中获取数据。...导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。 该方式在导航转入新的路由前获取数据。...我们可以在接下来的组件内的 beforeRouteEnter 守卫中获取数据,当数据获取成功后调用 next 方法。 滚动行为 在 HTML5 history 模式下可用。...vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

    2.9K31

    Vue-Router学习笔记,持续记录

    有时候,进入某个路由后,需要从服务器获取数据。...例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现: 1.导航完成之后获取 先完成导航,然后在接下来的组件生命周期钩子中获取数据。...在数据获取期间显示“加载中”之类的指示。 2.导航完成之前获取 导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。...7.记录一次vue-router不渲染组件 全局路由守卫调用的函数内,没有调用next,导致整个逻辑被挂起,不渲染组件。 8.路由匹配的优先级 经过测试,先定义的路由优先级低于后定义的路由。...也就是假设A是路由a的访问的组件,A内有一个子组件内有router-view组件,a路由下面还有子路由;访问a的子路由时,会渲染到A的子组件的router-view 14.如何让父组件不渲染

    9.2K40

    Preload与Prefetch的区别以及webpack项目中如何优化

    prefetch 预判加载与preload 使用方法是一样的 的缓存行为 当资源被 preload 或者 prefetch 后,会从网络堆栈传输到 HTTP 缓存并进入渲染器的内存缓存。...副作用 正确使用 preload/prefetch 不会造成二次下载,也就说:当页面上使用到这个资源时候 preload 资源还没下载完,这时候不会造成二次下载,会等待第一次下载并执行脚本。...对于 preload 来说,一旦页面关闭了,它就会立即停止 preload 获取资源,而对于 prefetch 资源,即使页面关闭,prefetch 发起的请求仍会进行不会中断。...但是也有一个突出的问题: 那就是当跳转其他页面的时候,需要下载相应页面的js文件,这就导致体验极其不好,每一次点击访问新页面都要等待js文件下载,然后再去请求接口获取数据。.../3-code-splitting-patterns-for-vuejs-and-webpack-b8fff1ea0ba4 使用 Proload/Prefetch 优化你的应用 https://github.com

    5K30

    vue常用组件库_vue内置组件

    Vue app的最小化框架 express-vue:简单的使用服务器端渲染vue.js vue-ssr:非常简单的VueJS服务器端渲染模板 vue-ssr:结合Express使用Vue2服务端渲染...:简单的前后端分离案例 websocket_chat:基于vuewebsocket的多人在线聊天室 photoShare:基于图片分享的社交平台 vue-zhihudaily-2.0使用Vue2.0...ofvue-hackernews-2 vue-bushishiren:不是诗人应用 houtai:基于vueElement的后台管理系统 ios7-vue:使用vue2.0 vue-router...过滤器 十六、服务端 vue-ssr – 结合Express使用Vue2服务端渲染 nuxt.js – 用于服务器渲染Vue app的最小化框架 vue-ssr – 非常简单的VueJS服务器端渲染模板...vue-easy-renderer – Nodejs服务端渲染 express-vue – 简单的使用服务器端渲染vue.js 十七、辅助工具 DejaVue – Vuejs可视化及压力测试 vue-generate-component

    8K20

    Vue常用经典开源项目汇总参考

    Vue 的核心库关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件 Vue 生态系统支持的库开发的复杂单页应用。...图片  Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件。  ...Vue app的最小化框架express-vue ★137 - 简单的使用服务器端渲染vue.jsvue-ssr ★67 - 非常简单的VueJS服务器端渲染模板vue-ssr ★56 - 结合Express...使用Vue2服务端渲染vue-easy-renderer ★22 - Nodejs服务端渲染 辅助工具DejaVue ★543 - Vuejs可视化及压力测试vue-play ★445 - 展示Vue组件的最小化框架...- 使用vue2.0 vue-router vuex模拟ios7Framework7-VueJS ★38 - 使用移动框架的示例cnode-vue ★37 - 基于vuevue-router构建的cnodejs

    5.8K11

    面试官:说说你对keep-alive的理解是什么?怎么缓存当前的组件?缓存后怎么更新?

    this.cache中,并且把key存入this.keys中 此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max,如果超过了,则把第一个缓存组件删掉 四、思考题:缓存后如何获取数据...解决方案可以有以下两种: beforeRouteEnter actived beforeRouteEnter 每次组件渲染的时候,都会执行beforeRouteEnter beforeRouteEnter...to, from, next){ next(vm=>{ console.log(vm) // 每次进入路由执行 vm.getData() // 获取数据...}) }, actived 在keep-alive缓存的组件被激活的时候,都会执行actived钩子 activated(){ this.getData() // 获取数据 }, 注意...:服务器端渲染期间avtived不被调用 参考文献 https://www.cnblogs.com/dhui/p/13589401.html https://www.cnblogs.com/wangjiachen666

    2.7K21

    百度前端一面必会vue面试题合集

    beforeUpdate:数据更新前调用,发生在虚拟DOM重新渲染打补丁,在这之后会调用改钩子。updated:由于数据更改导致的虚拟DOM重新渲染打补丁,在这之后会调用改钩子。...该钩子在服务器端渲染期间不被调用。beforeDestroy(销毁前):实例销毁之前调用。这一步,实例仍然完全可用,this 仍能获取到实例。...4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。5. unbind:调用一次,指令与元素解绑时调用。...要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新,该钩子在服务器端渲染期间不被调用。beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。...o unbind:调用一次,指令与元素解绑时调用。

    1.7K50

    VueJs开发笔记—IDE选择优化、框架特性、数据调用、路由选项及使用

    点击运行按钮或者使用快捷键F5就可以启动项目了,第一次启动之后ide就会把启动的js记录下来,下次不管在那个页面只需要使用F5启动即可;   2.再说WebStorm的使用优化vuejs项目的调试配置...---- 二、VueJs框架特性和数据调用: 框架特性:纯前端语言,要配合后台接口才可以实现数据交换,vuejs相当于一个编译工具,把你写的代码依赖的三方库,编译成浏览器可以识别js语言和html页面...数据调用:既然是客户端语言那么如果让vuejs去做服务器端渲染(SSR)是一件极其困难的事情,官方是这样说的:   “在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。...这份指南非常深入,适合已经熟悉 Vue, webpack Node.js 开发的开发者阅读。请移步 ssr.vuejs.org。...(目前只有英文版,社区正在进行中文版的翻译)”,可见vuejs服务器端渲染是非常吃力不讨好的(当然有兴趣的朋友可以去试一下ssr的搭建和渲染,对于深入了解一门语言的原理是很有帮助的),既然vuejs不擅长做服务器端渲染

    2.4K50

    前后端通吃,vue大全Mark一下

    这里的项目Star数不是实时更新的,一般是一周更新一次。...- VueJS2数据表格 vue-paginate ★261 - 分页数据的简约VueJS插件 vue-ydui ★247 - 基于Vue2的移动端微信UI vue-mugen-scroll ★239...的数据验证插件 vue-lazyloadImg ★4 - 图片懒加载插件 服务端 nuxt.js ★4564 - 用于服务器渲染Vue app的最小化框架 unvue ★310 - 使用简单的通用VueJS...应用 express-vue ★302 - 简单的使用服务器端渲染vue.js vue-ssr ★92 - 非常简单的VueJS服务器端渲染模板 doubanMovie-SSR ★85 - Vue豆瓣电影服务端渲染...框架搭建的rubychina平台 doubanMovie-SSR ★85 - Vue豆瓣电影服务端渲染 vue-jd ★76 - 京东移动web商城 vue-nReader ★73 - 使用vue2.0

    5.8K20

    vivo 悟空活动中台 - H5 活动加载优化

    CDN 是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度命中率。...不缓存HTML入口文件,缓存js、css的策略,避免资源不更新的同时,加快了专题资源的获取速度。 不缓存HTML入口文件的目的是防止客户端缓存策略,导致主入口资源不更新,导致线上升级失败。...域 不支持 支持 支持 多路复用 不支持 - 支持 数据压缩 不支持 不支持 使用HAPCK算法对 header 数据进行压缩,使数据体积变小,传输更快 服务器推送 不支持 不支持 支持 HTTP2.0...中执行,以此达到预渲染请求的并行进行。...- navigationStart 首次渲染时长 = 全部事件注册时长 = loadEventEnd - navigationStart 页面绘制时间=获取数据到加载结束 = loadEventEnd

    1.4K20

    Web页面全链路性能优化指南

    本文的大致流程为先讲理论知识,比如如何评价一个页面的性能好与不好、如果获取性能指标,如何使用各种性能相关工具,浏览器如何获取渲染页面。...HTTP协议的各个版本特性如下: HTTP/0.9没有请求头响应头,不区分传输的内容类型,因为当时传输HTML。 HTTP/1.0提供了请求头响应头,可以传输不同类型的内容数据。...HTTP/2.0HTTP/2.0使用同一个TCP连接来发送数据,他把多个请求通过二进制分贞层实现了分贞,然后把数据传输给服务器。也叫多路复用,多个请求复用同一个TCP连接。...使用Performance API获取性能相关指标 接下来我们来了解一下目前常用的性能指标,并且我们需要知道其中一些关键指标如何用Performance API获取。...使用 HTTP/2.0 HTTP/2.0使用同一个TCP连接来发送数据,他把多个请求通过二进制分贞层实现了分贞,然后把数据传输给服务器。也叫多路复用,多个请求复用同一个TCP连接。

    61911

    Web页面全链路性能优化指南

    本文的大致流程为先讲理论知识,比如如何评价一个页面的性能好与不好、如果获取性能指标,如何使用各种性能相关工具,浏览器如何获取渲染页面。...HTTP协议的各个版本特性如下: HTTP/0.9没有请求头响应头,不区分传输的内容类型,因为当时传输HTML。 HTTP/1.0提供了请求头响应头,可以传输不同类型的内容数据。...HTTP/2.0HTTP/2.0使用同一个TCP连接来发送数据,他把多个请求通过二进制分贞层实现了分贞,然后把数据传输给服务器。也叫多路复用,多个请求复用同一个TCP连接。...使用Performance API获取性能相关指标 接下来我们来了解一下目前常用的性能指标,并且我们需要知道其中一些关键指标如何用Performance API获取。...使用 HTTP/2.0 HTTP/2.0使用同一个TCP连接来发送数据,他把多个请求通过二进制分贞层实现了分贞,然后把数据传输给服务器。也叫多路复用,多个请求复用同一个TCP连接。

    1.7K10

    Vue 生命周期详解

    ,把data里面的数据模板生成html,完成了eldata 初始化,注意此时还没有挂在html到页面上。...mounted 挂在完成,也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次。...beforeUpdate 在数据更新之前被调用,发生在虚拟DOM重新渲染打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程 updated(更新后) 在由于数据更改导致地虚拟DOM重新渲染打补丁只会调用...,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用 beforeDestrioy...,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

    57940

    前端知识点总结vue篇(下)

    对SPA单页面的理解,它的优缺点分别是什么 理解:SPA在页面初始化时加载相应的HTML、JS、CSS。...v-for:循环指令,基于一个数组或者对象渲染一个列表,vue 2.0以上必须需配合 key值 使用。 v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。...v-once:渲染元素组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。用于优化更新性能。...常用的修饰符 .prevent 提交事件不再重载页面 .stop 阻止单击事件冒泡 .self 当事件发生在该元素本身而不是子元素时会触发 .capture 事件侦听,事件发生时会调用 .once 事件触发一次...在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据 的子组件发生变化,所以 vue 不推荐子组件修改父组件的数据 21. vue如何动态添加属性

    34820
    领券