一个网站能用asp c,wordpress本地,周口师范做网站,广州市比较大型的网站建设公司项目场景#xff1a; 场景一#xff1a; 使用vue开发移动端#xff0c; 有ABC三个页面#xff0c;点击A跳转到B#xff0c;点B跳转到C#xff1b; 点C返回B#xff0c;点B返回A。
场景二#xff1a; 场景一实现之后#xff0c;会出现这样一个问题#xff1a; 先从A跳…项目场景 场景一 使用vue开发移动端 有ABC三个页面点击A跳转到B点B跳转到C 点C返回B点B返回A。
场景二 场景一实现之后会出现这样一个问题 先从A跳转到BB页面会被缓存下来 当再从D跳转到B时B页面并不会更新。 解决方案 场景一可能会出下这个问题从A-B-C正常但当从B返回A时会报错这是因为从B返回A时传递的参数并不是从A到B的参数所以需要将B组件或页面缓存起来就可以解决这个问题缓存可以用vue’中的keep-alive标签使用方法如下
1加上判断条件如果keepAlive为true那么就缓存该组件也就是用keep-alive包裹它
如果为false那么就不包裹div idappkeep-aliverouter-view v-if$route.meta.keepAlive/router-view/keep-aliverouter-view v-if!$route.meta.keepAlive/router-view/div
2通过设置keepAlive的true或false来决定该组件是否缓存
const routes [{path: /,name: Home,component: () import(/views),meta: {keepAlive: false,},},{path: /list,name: List,component: () import(/views/list),meta: {keepAlive: true,},},
];
场景一目前已经实现但之后又遇到场景二的问题在网上搜索到的各种解决方法都有些复杂所以我用了最简单粗暴的方法就是每次返回A页面的时候直接让A页面刷新因为这个项目不大一共也就十来个页面所以这种方式的副作用对这个项目来说基本不存在影响代码如下 监听路由跳转但监听到跳往的页面是home页时直接刷新
templatediv idappkeep-aliverouter-view v-if$route.meta.keepAlive/router-view/keep-aliverouter-view v-if!$route.meta.keepAlive/router-view/div
/templatescript
export default {watch: {$route(to, from) {if (to.name Home from.name) {this.$router.go(0);}},},
};
/script
