vue切换路由不重新渲染_Vue来回切换页面不重新加载 --keep-alive

vue通过路由来回切换两个页面，默认会重新加载当前页面，导致页面不流畅&&加载时间过长等。

而是Vue的内置的一个组件，可以在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

当使用包裹动态组件时，会缓存不活动的组件实例，但不是销毁它们。与相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

include: 字符串或正则表达式。只有匹配的组件会被缓存。

exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。// 组件

export default {

name: 'test-keep-alive',

data () {

return {

includedComponents: "test-keep-alive"

}

适用于Vue2.X

keep-alive生命周期钩子函数：activated、deactivated

使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

打赏

微信扫一扫，打赏作者吧～

vue切换路由不重新渲染_Vue来回切换页面不重新加载 --keep-alive相关推荐

vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
vue动态路由变化页面不重新加载问题，实现方式比较简单，就是有点鸡贼
由于使用了动态路由,有时候页面需根据路由来动态变化,整个页面需要重新加载,但是地址指向同一个,这边用了一个比较取巧的方式将整个页面封装成一个子组件 children => formTe,参数可 ...
Vue性能优化：图片与组件，如何实现按需加载?
Vue性能优化:图片与组件,如何实现按需加载? 前沿:按需加载是性能优化其中的一个环节,可以是图片的按需加载,也就是lazyload来实现按需加载的场景,也可以是组件库的引入,只需部分组件的使用而无需 ...
vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...
这种场景你可能需要把模态框包装成插件.vue插件开发和组件的区别 - 水秋玄im.mkinit.com vue插件和组件的区别使用插件的方式包装组件和直接注册全局组件其实是一样的,都是注册组件.不 ...
vue.js能美化界面吗_vue将单页面改造成多页面应用的方法
问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验. ...
踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...
react 动态修改路由_升级到 React Router 4 并实现动态加载和模块热替换
这篇文章是升级到Webpack2坑--模块热替换失效页面不自动刷新?的后续.那篇文章主要说明了,升级到 Webpack 2 之后,通过升级webpack-dev-server和react-hot-lo ...
浏览器渲染阻塞与优化-详解推迟加载、异步加载。
我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞 ...

vue切换路由不重新渲染_Vue来回切换页面不重新加载 --keep-alive

vue切换路由不重新渲染_Vue来回切换页面不重新加载 --keep-alive相关推荐

最新文章

热门文章