<vue 路由 8、keep-alive的使用>

一、     知识点

1、什么是keep-alive?

keep-alive是Vue.js的一个内置组件。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

2、 include和exclude参数

include 和 exclude 属性允许组件有条件地缓存。

二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

3、 强调

nclude 和 exclude中使用的名字是在组件的名字，而不是路由中的名字。

二、    
效果

about页面使用的keep-alive的缓存而home页面没用。

home页面输入123 然后点击about

about中输入456在返回home页面

home里输入的123没有了，在点击about

about中的345还有。

三、代码结构

注：主要是标红的几个文件

四、代码

index.js

//引入路由
import {
	createRouter,
	createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'

//定义路由
const routes = [{
		path: '/',
		name: 'Home',
		component: Home,
		meta: {
		  title: '首页'
		}
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue') ,
		meta: {
		  title: '关于'
		}
	}
]

//创建路由
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
	history: createWebHistory(process.env.BASE_URL),
	routes
})

// 前置守卫(guard)
//参数说明
//to: 即将要进入的目标的路由对象.
//from: 当前导航即将要离开的路由对象.
//next: 调用该方法后执行
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title
   console.log('++++');
  //beforeEach方法必须调用
  next()
})

// 后置钩子(hook)
router.afterEach((to, from) => {
   console.log('----');
})

//返回了路由
export default router

App.vue

<template>
	<div id="nav">
		<router-link to="/">Home</router-link> |
		<router-link to="/about">About</router-link> |
	</div>

  <!-- include 用法 -->
    <!-- 多个组件用逗号","隔开 -->
    <!-- <keep-alive :include="['AboutComponent','HomeComponent']"> -->
  	  <router-view v-slot="{ Component }">
		  <keep-alive :include="['AboutComponent']">
  	    <component :is="Component" />
  	  </keep-alive>
  	</router-view>  

   <!-- exclude 用法 -->
	<!-- <router-view v-slot="{ Component }">
	  <keep-alive :exclude="['AboutComponent']">
	    <component :is="Component" />
	  </keep-alive>
	</router-view> -->

</template>

<script>

</script>

Home.vue

<template>
  <div class="home">
	  <p>Home Page</p>
    <img alt="Vue logo" src="../assets/logo.png">
	<input type="number" placeholder="home请输入价格"  >
  </div>
</template>

<script>
	  import { defineComponent   } from 'vue'
		export default defineComponent({
			name: 'HomeComponent',
			setup() {

				return {

				}
			}
		})

</script>

About.vue

<template>
  <div class="about">
    <h1>about page</h1>
	<input type="number" placeholder="about请输入价格"  >
  </div>
</template>

 <script>
	 import { defineComponent   } from 'vue'
 	export default defineComponent({
 		name: 'AboutComponent',
 		setup() {

 			return {

 			}
 		}
 	})
 </script>