返回路由缓存与不缓存:
需求:领导要求点击跳转到另一个页面后回退缓存那个位置:
1、给点击加上点击事件
<div class="sub_icon" @click="goBack"></div>
定义该方法:
window.history.go(-1); //表示返回上一页
2、在router.js中设置属性
import Vue from "vue";
//引入使用路由
import VueRouter from "vue-router";
import config from "../bbqm/config";
import Home from "./views/home.vue";
import Pay from "./views/pay.vue";
import Result from "./views/result.vue";
import Info from "./views/information.vue";
Vue.use(VueRouter);
const routes = [
//设置默认指向的路径
{
path: "/",
component: Home,
meta: { title: config.name },
},
// 重点看这里 : 在meta 中 添加 keepAlive
{
path: "/result",
component: Result,
meta: { title: config.name ,keepAlive:true},
},
];
// 解决导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
// mode: 'hash', //去掉hash 不用/#
base: config.tag,
mode: "history",
routes: routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return {
x: 0,
y: 0,
};
}
},
});
export default router;
3、在APP.vue中添加:
<template>
<div id="app">
<keep-alive>
<!-- meta自定义keepAlive属性决定哪些页面会被缓存 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 当meta中keepAlive为true的时候不会被缓存 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
Ps :活到老学到老,这里我主要是应用到了分页功能 点击看详情返回来的