vue路由缓存列表不刷新
本篇文章给大家谈谈vue路由缓存列表不刷新，以及vue路由缓存页面对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、Vue中iframe保持活动状态（不刷新）
- 2、Vue路由this.$router.push跳转页面不刷新
- 3、vue路由跳转，不让页面刷新，怎么做
- 4、解决vue项目 点击相同菜单栏页面不刷新
- 5、vue 同一个页面第二次跳转路由不刷新问题
Vue中iframe保持活动状态（不刷新）
前言：
提起vue的缓存，大家第一时间想到的一定是keep-alive，但是了解keep-alive缓存原理的都知道是将节点信息保留在VNode中的组件中（在内存中），并在需要渲染时从VNode渲染到真实DOM。iframe页面中的内容不属于该节点的信息，因此使用keep-alive仍会重新呈现iframe中的内容。但公司很多的项目涉及报表，报表都是以iframe的形式渲染的。
解决思路：
既然keep-alive只对节点信息有缓存，可以考虑在Vue的route-view节点上做点什么吗？切换非iframe页面时，它利用Vue路由；切换iframe页面时，它利用v-show切换显示和隐藏，这样就不会删除iframe节点，从而可以保持iframe状态。
做法：
router下的index.js
引入iframe页面
路由配置
在router-view页面
div id = "index"
Header /
keep-alive
router-view /
/keep-alive
!-- iframe page --
component
v-for="item in hasOpenComponentsArr"
:key="item.name"
:is="item.name"
v-show="$route.path === item.path"
/component
Footer /
/div
/template
script
import Header from '@/views/homePage/homePage_Header'
import Footer from '@/views/homePage/homePage_Footer'
import Vue from 'vue'
export default {
name: "index",
components : {Header,Footer},
created() {
const routes = this.$router.options.routes;
const componentsArr = this.getComponentsArr(routes);
componentsArr.forEach((item) = {
Vue.component(item.name, item.component);
});
this.componentsArr = componentsArr;
this.isOpenIframePage();
},
data() {
return {
iframeArr:[],
componentsArr: []
}
},
watch: {
$route() {
this.isOpenIframePage();
}
},
computed: {
hasOpenComponentsArr() {
return this.componentsArr.filter(item = item.hasOpen);
}
},
methods: {
isOpenIframePage() {
const target = this.componentsArr.find(item = {
return item.path === this.$route.path
});
if (target !target.hasOpen) {
target.hasOpen = true;
}
},
getComponentsArr(routes) {
routes.map( it = {
if(it.iframeComponent){
const name = it.name || it.path.replace('/', '');
this.iframeArr.push({
name: name,
path: it.path,
hasOpen: false,
component: it.iframeComponent
})
}
if(it.childrenit.children.length0){
this.getComponentsArr(it.children)
}
})
return this.iframeArr
}
}
}
/script
style scoped
/style
结语：
文章参看至：
如果大家有好的思路，欢迎交流讨论
Vue路由this.$router.push跳转页面不刷新
介绍： 在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。
案例：
A页面：
B页面：
问题：
当在A页面第一点击按钮到B页面时，一切正常，当返回到A页面再次点击按钮时，B页面没有执行mounted钩子函数，结果导致mounted函数中查询方法不执行。
vue.js中created()与activated()的个人使用理解：
this. router.push()的差别：
vue-router3.0版本中 router.push 不能刷新页面的问题：
vue路由跳转，不让页面刷新，怎么做
可以使用keep-alive缓存页面：具体做法是：可在App.vue中
keep-alive :include="includePages"
router-view id="app"/router-view
/keep-alive
includePages：对应一个数组，里面是要缓存的页面的name，即是.VUE文件中：
export default {
name: 'xxx',
这里的XXX
解决vue项目 点击相同菜单栏页面不刷新
痛点： 用vue搭建的后台管理系统中，一般点击左侧当前菜单，当前组件是无法刷新的。
问题原因： 点击相同菜单，因为vue的路由机制是处于相同的路由下，路由组件不重新渲染，因此点击相同路由，vue路由系统不做任何的响应。
解决方案思路： vue的路由机制是无法改变的，但是结合我们的项目发现，如果点击相同的路由，我们可以动态的销毁当前组件，再重新加载，这样就达到了重新渲染的效果。
实际操作：
vue 同一个页面第二次跳转路由不刷新问题
vue在第二次跳转同一路由跳转数据不更新，
使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。vue 同一路由跳转不走生命周期，导致数据不更新。
使用watch 监听路由变化。手动更新数据。
使用 router-view :key="$route.fullPath"/
把你mounted(){} 里面执行的办法在 activated(){} 里面在执行一遍，完美解决。
关于vue路由缓存列表不刷新和vue路由缓存页面的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
