路由中meta自定义keepAlive属性

最新推荐文章于 2024-09-27 11:55:45 发布

cv酱

最新推荐文章于 2024-09-27 11:55:45 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/YingUser/article/details/127914049

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在Vue项目中通过配置路由实现页面缓存功能，包括利用`keep-alive`组件进行页面缓存的实现方法及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

返回路由缓存与不缓存：

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

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 :活到老学到老，这里我主要是应用到了分页功能点击看详情返回来的