网站开发毕业设计源码,中国电子商务官网首页,学室内设计要多久能学会,黄石市seo关键词优化怎么做应用场景
跳转下一个页面后#xff0c;返回当前页面#xff0c;或者在多个页面之间切换#xff0c;保留页面中的所有状态#xff0c;常见的就是填写到一半的表单。h5的tabbar页面缓存#xff0c;避免重复加载数据。
主要实现思路
这个东西很常见#xff0c;动态路由一…应用场景
跳转下一个页面后返回当前页面或者在多个页面之间切换保留页面中的所有状态常见的就是填写到一半的表单。h5的tabbar页面缓存避免重复加载数据。
主要实现思路
这个东西很常见动态路由一般将是否缓存页面的配置放在数据库中。这里写在本地方便看。
在路由的meta中设置该页面是否缓存 {path: xxx,name: xxx,component: () import(/views/xxxx/xxxx.vue),meta: { title: 创建xxx, isCache: true },}拿到route实例进行配置
//vue2
this.$route
//vue3
const route useRoute();设置keep-alive组件的key为用户的token或者当前登录用户的userId避免退出系统重新登陆与上个用户混淆
keep-alive :keyuserStore.userToken :keyuserStore.userTokenvue3主要实现代码 router-view v-slot{ Component }keep-alive :keyyourUserTokencomponent :isComponent v-ifroute.meta.isCache :keyroute.fullPath //keep-alivecomponent :isComponent v-if!route.meta.isCache //router-viewvue2主要实现代码
divkeep-alive :keyyourUserTokenrouter-view v-if$route.meta.isCache //keep-aliverouter-view v-if!$route.meta.isCache /
/div总结
3和2的写法上是有差异的这里写一下分享给刚入门不知道的朋友
