A. vue 不是路由跳转的页面怎么缓存
vue缓存主要四种方式:
使用vuex
存放在cookie中
存放在localStorage或者sessionStorage中
存放在路由集合中
B. vue 想要返回页面停留在离开页面时的位置，无论用什么方法，是必须要用keep-alive吗
最近项目中由于列表居多且都做了下拉刷新上拉加载，所以就使用了keep-alive组件来缓存页面数据，但是当在其他页面做一些操作改变了列表数据，当来到列表的时候每次都要下拉刷新一下，体验不好，所以就使用到了EventBus，在需要更新的时候就用EventBus来刷新列表。
1.keep-alive组件
keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。但是对于展示型页面比较好用，表单类页面也会将所填数据保存起来，对于那种表单没提交又需要保存所填数据的场景非常实用。
keep-alive所缓存的页面只会执行一次created和mounted，也就是在第一次进入才会执行。但是又会多两个生命周期，分别是activated、deactivated，activated在每次进入执行而deactivated在每次离开前执行。 当然有些页面不需要缓存，就要进行一些处理，这里就不多讲了，因为估计大家都知道(不知道网络去...)。
2.EventBus(事件总线)
EventBus用于实现组件之间的数据通讯，使用起来非常之简单。只需要在main.js中加入以下代码：
Vue.prototype.$eventBus = new Vue();
上面代码就创建了一个全局EventBus，其实就是一个vue实例。
这样我们就可以在各个页面中使用了。
在页面中使用 $emit 方法就可以触发事件,然后组件中使用 $on 方法就可以监听对应事件,这个和组件之间传值是一样的。不过这个可以在非父子组件中传递状态,和vuex差不多。当然这种方法在简单应用中可以使用，复杂的应用应该使用 vuex ，这样方便管理和维护。
this.$eventBus.$emit('msg',data);// 触发事件 this.$eventBus.$on('msg',(data)=>{}) // 监听事件
3.组合使用
这两个我感觉很配，当我们使用keep-alive缓存了页面组件，我们需要在A面来触发B页面的列表刷新或其他方法时，这时候使用EventBus就非常方便，其他方法也可以，比如说使用vuex，但是此时就没有直接使用EventBus方便快捷了。 当我们在页面中使用了 this.$eventBus.$on 去监听一个事件，只要页面被缓存，就可以监听到其他页面触发的事件。这样我们就可以减少一些不必要的请求，而且在需要更新的时候去更新，也可以做一些其他的操作，简直美滋滋。
总结
以上所述是小编给大家介绍的vue的keep-alive中使用EventBus的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:基于vue中keep-alive缓存问题的解决方法详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)vue中keep-alive的用法及问题描述解决vue单页使用keep-alive页面返回不刷新的问题vue2中的keep-alive使用总结及注意事项vue项目优化之通过keep-alive数据缓存的方法vue使用keep-alive实现数据缓存不刷新Vue keep-alive实践总结（推荐）深入理解vue-router之keep-alive
C. vue.js怎么在页面一开始加载数据
加载和显示新数据在vue里最简单了，往你的数据中添加新的值就可以了：methods:{loadMore:function(){yourAjaxMethod(function(moreData){this.items.push(moreData);}.bind(this));}}另外一个问题就是如何触发loadMore，这里像你说的，滚动。所以你需要监听下scroll事件或者使用其他滚动插件比如iscroll，在对应的回调里调用loadMore
D. vue写的页面发送请求后为什么需要刷新才显示
工具/原料
vue.js
webstorm
/步骤
、原理
图所示我需要要刷新页面A编写自跳空页面用户操作A页面A页面先跳转空页面空页面马跳A页面候vue重新加载A页面种变相实现自我刷新缺点需要刷新页面较空页面随变
二、前页面事件监听
图所示我定义refreshPage特定事件调处理业务逻辑使用vuerouter跳转空页面空页面路由路径/user/back路径随便取家选择自路径
三、空页面编写
步骤阅读
6
图所示空页面立即执行路由跳原页面候原页面进行重新加载实现刷新/user/index跳原页面路由路径家需要根据自项目情况写
7
四、注意事项
本经验所使用其实种hack极端情况比网络极端恶劣能现跳空页面跳或者干脆跳空页面情况家需要根据自项目情况酌情选择
E. vue用了vuex和路由的缓存，出问题了一个页面添加按钮进去后一直都有上一次添加的数据参数在上面如何修改
建议在路由钩子里面做判断,beforeRouterEnter
F. vue-router跳转页面，URL变化但页面里的数据没变化，什么情况
localhost:8080/xname/1
localhost:8080/xname/2
xname.vue只created一次
怎样才能让1和2页面显示的数据不一样呢，
尝试了下watch $route，我的xname.vue代码如下：
created(){
this.fetchdata();
},
watch:{
'$route':'fetchdata'
},
methods:{
fetchdata(){
console.log("created")
}
}
但是这种方式会存在下面的问题页面进入的时候执行了一次fetchdata，页面离开的时候又执行了一次fetchdata，每次进入页面都得刷新数据，没有缓存
G. vue.js有局部缓存吗
是没有的，可以自己写一个vuex的实现,小型的做缓存数据用,或者直接上vuex看你应用大小
H. 怎么用vue封装第一次请求过来的数据成一个对象，留作备份，与最终要保存的时候的数据作对比
给你提供一个缓存方案：
你可以用indexDB做一个备份，简单点的就用localStorage做个数据保存。在接口层写一个缓存处理就好了。每次接口请求前，都去缓存（localStorage/indexDB）里面去查找是否有对应的key(可以直接用接口的urlTag做key)，如果有，直接取数据先显示出来，之后请求接口后更新数据。
如果你只是比较档次会话的接口数据，可以使用sessionStorage，不会永久占用资源。
I. 解决vue2.x中数据渲染以及vuex缓存的问题
最近在学习Vue.js，把自己遇到的问题做个记录，所以，今天添加一点小笔记。
在项目中遇到两个问题，简单的做个笔记来记录自己解决的问题，可能不是很好的处理办法，欢迎提出，自己还在不断优化中...
第一个是vue在加载页面的时候，会先加载静态资源，这个时候数据还没有请求回来，用户会先看到静态的内容（就是页面固定写死的），过一会才会有数据回来渲染，这体验是很差的，其实解决办法也很简单，就是用vue里的
v-if
来判断请求的数据是否返回...
<div
class="container"
id="app"
v-cloak>
<div
v-if='moneyInMsg.uuid'>
<in-account-msg
:money-in-msg="moneyInMsg"></in-account-msg>
</div>
</div>
这里的
v-if
=
'moneyInMsg.uuid'
就是来判断数据有没有请求回来，如果请求回来就让他显示，没有请求到数据，就让他loading，这样体验就会好很多。在这里还需要注意的是，v-if判断的数据源，是数据返回的字段，如果两个字段只能存在其一的话，可以v-if
='a
||
b'
来判断数据是否成功的返回；还要注意的一点是，不能直接在组件里用v-if判断，也不能直接在根标签里判断，直接嵌套一个div就可以解决，并不影响样式，只做数据是否正常返回的显示作用；
第二个就是在使用vuex时，有数据缓存；我遇到的情况是，在列表页点击进入详情页，返回到列表页，在进入另一个详情页的时候，数据会显示之前的数据，同时页面还在loading（接口返回的数据比较慢），过一会数据返回的时候，才重新渲染页面。可能是自己对vuex理解的不够深入，没有在vuex基础上解决这个问题。虽然曲折的解决了这个问题，但是不够zhuang,但是解决了问题，后期再做优化。
在之前解决的方案中，是进入页面的时候，重新刷新页面，重新请求数据，代码如下：
export
const
refresh
=
(title)
=>
{
document.title
=
title;
let
iframe
=
document.createElement('iframe');
iframe.src
=
require('./mm.jpg');
iframe.setAttribute('style',
'display:none;');
let
loadFn
=
function
()
{
iframe.removeEventListener('load',
loadFn);
document.body.removeChild(iframe);
console.info('Page
Title
IS
'
+
title);
iframe
=
null;
loadFn
=
null;
}
document.body.appendChild(iframe)
iframe.addEventListener('load',
loadFn);
}
但是没有达到预期的效果，依然会出现上面的情况...
丫的,抓狂了...（被别人催的感觉真的不爽...）
网络啊，google啊，都没有遇到这种情况的？找到一个，还是提问的，没有回答的，好吧，还是靠自己。自己动手，丰衣足食啊...
思路是，定义一个参数status为false，当数据没有请求回来，就不显示，也是用上面的方式来判断，一直loading（请求失败，去掉loading），当数据返回的时候，让status为true；使用$nextTick来更新数据...
贴上自己部分的代码作为参考:
<template>
<div
v-if='status
&&
order.name'>
//页面展示的数据
</div>
</template>
<script>
export
default{
data(){
return
{
status：false
}
},
created(){
var
_this
=
this;
this.setDd({res
=>{
_this.$nextTick(function(){
_this.status=
true
});
}})
},
computed:{
...mapGetters({//getter获取的数据})
},
methods:{
...mapActions(['setDd'])
//获取数据的方法
}
}
</script>
处理的方式比较丑陋...,但是实现了想要的效果；这里注意一点就是v-if的判断问题。（v-if='status
&&
order.name'）这个用了并且，目的是有数据返回，才能让他显示，如果没有数据，会显示静态的值，数据都为underfind...
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。