VUE路由动态缓存:返回上页面不刷新,再次进入该页面刷新

由于项目里遇到这个需求,于是在网上搜索了一下,几乎都是使用keep-alive,然后给路由配置里设置缓存为true,但是这样并不能满足需求,而是造成了第一次打开页面确实加载刷新了,然后只要打开过,后面就再也不会刷新,有点坑。

下面写一下我的解决方案:

1.stroe.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
    catchArr: '',
}

const getters = {
}

const mutations = {
    iskeepAlive(state, component) {
        state.catchArr = component
    },
    noKeepAlive(state, component) {
        state.catchArr = []
    },
}

const actions = {
}

export default new Vuex.Store({
    state,
    mutations
})

2.App.vue文件

<template>
  <div id="app">
    <keep-alive :include="cached">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "app",
  created() {},
  data() {
    return {
      cached: this.$store.state.catchArr,
    };
  },
  watch: {
    $route: {
      handler: function (to, from) {
        this.cached = this.$store.state.catchArr;
      },
    },
  },
  methods: {},
};
</script>

3.main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router'

import store from './store/index'
Vue.use(VueRouter);
Vue.config.productionTip = false

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

let router = new VueRouter({
  mode: 'hash',
  routes
})


router.beforeEach((to, from, next) => {
  // 对组件进行动态缓存
  if (to.name == 'express' || to.name == 'eqWarning' || to.name == "prediction") {
    store.commit('iskeepAlive', to.name);
  }
  next();
})

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

4.具体组件页面,这里以express.vue举例,这里特别要注意的是App.vue里面的keep-alive里include的值为组件页面里name设置的值,而非route里面配置的name。

<script>
export default {
  name: "express",//主要是这个name的值
  data() {
    return {
    };
  },
  created() {},
  beforeRouteLeave(to, from, next) {
    if (
      to.name != "imcatalogDetail" &&
      to.name != "disasterDetail" &&
      to.name != "intensityDetail"
    ) {
      this.$store.commit("noKeepAlive", "express");
    } else {
      this.$store.commit("iskeepAlive", "express");
    }
    next();
  },
  methods: {   
  },
};
</script>

本文参考了这篇文章:Vue动态改变keepAlive缓存

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值