<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

Home.vue

About.vue