【vue】keep-alive的使用，vue返回上一页不刷新

用vue做单页应用，在我们来回切换路由或者点击返回键的时候，页面总是会重新刷新。这样的用户体验是非常差的，我们希望页面的数据会保留，而不是每次进入都要重新载入。这里我们可以使用vue官方提供的内置组件keep-alive，------>官方传送门。下面简单介绍一下如何使用。

一、强制缓存

1、所有的组件都缓存

<keep-alive>
       <router-view></router-view>
</keep-alive>

在router-view外层包裹keep-alive，这样页面均只载入一次，当然这是不可取的，也不常用。

2、指定组件缓存
keep-alive提供include参数

字符串或正则表达式。只有名称匹配的组件会被缓存。

示例

<keep-alive  include="name">
     <router-view></router-view>
</keep-alive>

只缓存name

<keep-alive  include="name,index">
     <router-view></router-view>
</keep-alive>

只缓存name，index

二、动态缓存

所谓动态缓存，即我们要根据来自哪个页面来判断当前是否更新。这里就需要给keep-alive一个参数，用于判断。

下面示例有三个页面，home ，about，news。
需求如下：

1. home和about可以来回切换，其中about被缓存，而home每次从about进入都会更新
2. home页面可以进入list，每次进入list都会刷新，而从list返回home，home不刷新

大致思路如下：
第一步：首先给keepAlive组件一个值keepAlive，第一步在App.vue配置

    <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
            <!-- 被缓存，比如about -->
        </router-view>
    </keep-alive>
 
    <router-view v-if="!$route.meta.keepAlive"></router-view>
	<!-- 被刷新，比如home -->

当keepAlive的值为true，则缓存，为false则更新

第二步：
在router配置文件，index.js配置keepAlive参数：

 {
    path: '/',
    name: 'home',
    component: Home,
	meta:{
		app:true,  //这个是为了在news页面隐藏App.vue的导航栏，此处忽略
		keepAlive:true //默认home缓存
	}
  },
  {
    path: '/about',
    name: 'about',
    component: About,
	meta:{
		app:true,
		keepAlive:true   //默认about缓存
	}
  },
  {
    path: '/news',
    name: 'news',
    component: News,
	meta:{
		app:false,
		keepAlive:false  //默认news更新
	}
  },

这样about和home页面只更新一次，而news每次都更新

第三步：
接下来就考虑从不同的页面进入home，来决定home是否缓存。所以我们需要根据进home页面的路由来改变keepAlive的值。

1、在home.vue添加导航守卫beforeRouteLeave

  	beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next();
   },

当从home页面离开即触发这段代码
因为默认home为缓存，所以每次离开时将home修改为更新，此时每次从about进入home都会更新

2、在news.vue添加导航守卫beforeRouteLeave

		beforeRouteLeave(to, from, next) {
            if (to.path == "/") {
               to.meta.keepAlive = true;
			  
            } else {
               to.meta.keepAlive = false;
			 
            }
			  next();            
        },

当从news页面离开即触发，
如果news进入的是home页面，则将home页面的keepAlive 改为true即缓存，否则改为false。

这样所有的配置已经完成，可以实现上面所说的需求
为了更直观的展现效果，我们在每个页面创建时打印一段话，例如home页面

    created() {
     console.log('home刷新了')
   },

下面是效果图：

附完整代码：
App.vue

<template>
  <div id="app">
    <div id="nav" v-show="$route.meta.app">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
	
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
            <!-- 被缓存，比如about -->
        </router-view>
    </keep-alive>
 
    <router-view v-if="!$route.meta.keepAlive"></router-view>
	<!-- 被刷新，比如home -->
  </div>
</template>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
	meta:{
		app:true,
		keepAlive:true
	}
  },
  {
    path: '/about',
    name: 'about',
    component: About,
	meta:{
		app:true,
		keepAlive:true 
	}
  },
  {
    path: '/news',
    name: 'news',
    component: News,
	meta:{
		app:false,
		keepAlive:false
	}
  },

]


const router = new VueRouter({
  // mode: 'hash',
  base: process.env.BASE_URL,
  routes
})



export default router

Home.vue

<template>
  <div class="home">
    <p>主页</p>
   <h2> <router-link to="/news">点击进入新闻页</router-link></h2> 
   
  </div>
</template>

<script>
export default {
    name: 'home'
  	beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next();
    },
    created() {
      console.log('home刷新了')
    },
}
</script>

About.vue

<template>
  <div class="about">
    这是关于页面
  </div>
</template>
<script>
	 export default{
		  name: 'about',
		  mounted() {
		 	console.log('about刷新了')
		 }
	 }
</script>

News.vue

<template>
	<div class="main">
		<h1>这里是新闻页</h1>
	</div>
</template>

<script>
    export default{
	    name: 'news',		
		beforeRouteLeave(to, from, next) {
            if (to.path == "/") {
               to.meta.keepAlive = true;
			  
            } else {
               to.meta.keepAlive = false;
			 
            }
		    next();            
        },
	    created() {
			  console.log('news刷新了')
	    },
	}
</script>
<style>
</style>