关于VUE路由跳转的缓存问题

由于自己是刚学的vue，所以对vue挺多不解的问题。希望各位码友能够指出我的不对，或者给我更好的建议。

关于项目

最近在做一个项目，整个项目是由vue+vue-router+vue-cli+webpack+mui+H5 plus+ 构建的一个混合开发项目。通过Hbuilder打包成APK。原本项目是直接在Hbuilder开发的，使用的也是Hbuilder自动生成的框架。后来想把项目重构。所以才有机会学习webpack+vue-cli+vue-router,可是问题来了，相对于一些安卓版本较低的手机来说，重构的项目在手机里经常崩掉。我想了解一下是什么原因呢？手机的问题，还是说vue不适合做混合式开发。

关于VUE路由缓存问题。

不知大家有没有遇到一个问题就是，经常路由间的跳转会出现一些缓存的问题，解决起来很麻烦，那么先讲讲我在项目中怎么处理这些缓存问题。

这是整个资源文件的目录，也就是vue-cli构建的整个项目，在这个router文件夹下的index.js引入组件。

项目目录

基本上组件都是这样引入

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index' 
import Login from '@/pages/login' 
import Home from '@/pages/home' 

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/index',
      name: 'Index',//要注意这里要引号，之前这里没加引号，爬了好久
      component: Index,
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
    }]
})

页面之间的跳转，我用的是这种方式：

例如我在index.vue页面想跳到login.vue页面时

this.$router.push({
  name: 'Login',
  params: {
    data:'abc'
  }
});

如果login.vue页面是没有加载过的话，就会按照生命周期执行，但是下次在进入这个login页面，login页面是不会刷新的，当然我们可以利用路由的activated方法来重新刷新数据。

<template>
</template>
<script>
export default {
    data() {
      return {}
    },
    activated(){
        this.init();
    },
    methods:{
        init(){},
    }
}

</script>
<style>
</style>

这样一来，每次进入login页面都会刷新数据，避免了有时候数据的缓存导致了信息的不一致。

那么问题来了，假如我想index页面进入login时刷新数据，而home页面进入login页面不刷新数据，该怎么操作？我本来的做法是每次在路由的params里添加一个标志是否刷新页面的参数过去就行啦，例如：

this.$router.push({
  name: 'Login',
  params: {
    data:'abc',
    isFresh:true//标志刷新，false为不刷新
  }
});

login页面对isFresh进行判断，作出相应的处理

<template>
</template>
<script>
export default {
    data() {
      return {}
    },
    activated(){
        if(this.$route.params.isFresh){
            //注意路由跳转时$router.push()和$route.params的route,一个带r
            this.init();
        }else{} 
    },
    methods:{
        init(){},
    }
}

</script>
<style>
</style>

但是这样一来很多页面进入login页面都要携带一个是否刷新的标志。这样的话会非常的不方便。

后来发现了导航守卫的beforeRouteEnter方法，感觉可以在这个方法里处理一下逻辑。但是不好的一点是beforeRouteEnter方法是没办法使用this去执行init();

<template>
</template>
<script>
export default {
    data() {
      return {}
    },
    activated(){
        
    },
    methods:{
        init(){},
    },
    beforeRouteEnter(to, from, next) {
      if (from.name == 'Index') {
        this.init();//执行不了
      }
      next();
    }
}

</script>
<style>
</style>

但是有种方法可以解决this不能使用的问题

<template>
</template>
<script>
export default {
    data() {
      return {}
    },
    activated(){
        if (this.$route.meta.isFresh) {
            init();
        }else{}
      this.$route.meta.isFresh = false;//记得这里一定要设置一下false。
    },
    methods:{
        init(){},
    },
    beforeRouteEnter(to, from, next) {
      if (from.name == 'Index') {
        to.meta.isFresh = true;
      }
      next();
    }
}

</script>
<style>
</style>

这样一来，所有页面的刷新与否都在login页面处理了。虽然这两种方法用起来差不多，代码量也差不多，但是我还是觉得在login页面可以统一处理，逻辑会清晰很多。

没有用过keep-Alive，所以不懂keep-Alive是否有强大作用，希望各大码友摔个链接让我膜拜一下，我处理刷新缓存问题都是用以上方法，但是这样刷新也是挺烦的，不知道有没有更好的方法对于这种刷新缓存的问题。