路由中meta自定义keepAlive属性

返回路由缓存与不缓存:

需求:领导要求点击跳转到另一个页面后回退缓存那个位置:

1、给点击加上点击事件

 
定义该方法: 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中添加:




Ps :活到老学到老,这里我主要是应用到了分页功能 点击看详情返回来的

你可能感兴趣的:(前端,javascript,vue.js,开发语言)