如何使vue2路由后退不刷新
1. 设置路由为两种情况,路由meta.keepAlive为true/false,true则运行缓存路由组件,false则重新加载路由组件
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件,比如 Home! --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 这里是不被缓存的视图组件,比如 Edit! --> </router-view>
2. 给路由配置设置meta参数
// routes 配置 export default [ { path: "/", name: "home", component: Home, meta: { keepAlive: true // 需要被缓存 } }, { path: "/:id", name: "edit", component: Edit, meta: { keepAlive: false // 不需要被缓存 } } ]
3. 在组件内设置路由是否重新加载
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.keepAlive = true; // 让 A 缓存,即不刷新 next(); } };
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。
- 上一篇: Mongodb的update操作
- 下一篇: UGUI代码动态UI的大小、尺寸等信息