失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > VUE 返回页面不刷新实现代码

VUE 返回页面不刷新实现代码

时间:2021-03-14 07:54:50

相关推荐

VUE 返回页面不刷新实现代码

用 VUE 默认的keep-alive组件实现

实现方式:

1.在路由内设置页面是否需要缓存;

示例代码:(在需要的组件里面添加meta 对象,keepAlive属性,keepAlive的值为是否需要缓存组件)

{path:'/UpInfo',name:'UpInfo',component:UpInfo,meta:{keepAlive:true}

2.在 app.vue 里面使用router-view 组件;

在 APP.vue 里面 使用 keep-alive 把 router-view 包裹起来,并且判断是否在路由里面设置的是否需要缓存。

<template><div id="app"><keep-alive><router-view v-if='$route.meta.keepAlive'/></keep-alive><router-view v-if='!$route.meta.keepAlive'/></div></template><script>export default {data() {return {}},methods: {},mounted() {}}</script><style scoped />

完成。就两步

如果觉得《VUE 返回页面不刷新实现代码》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。