vue中keep-alive的使用

最新推荐文章于 2024-08-18 01:09:30 发布

吴莉

最新推荐文章于 2024-08-18 01:09:30 发布

阅读量159

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/kgcwuli/article/details/97315393

版权

本文详细介绍了Vue中`keep-alive`组件的使用，包括其缓存组件、激活与停用的生命周期钩子、状态保持、滚动行为的处理，以及如何通过`include`、`exclude`和`meta`属性来精细化控制组件的缓存策略。通过`keep-alive`，可以提高性能，但需注意数据更新和页面刷新的问题。

摘要由CSDN通过智能技术生成

keep-alive
keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

<keep-alive>
    <loading></loading>
</keep-laive>

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行
被包裹在keep-alive中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处

关于这一点也是仁者见仁，有的产品可能会要求在每一次进入一个组件时页面的初始位置都是保持在顶部的，这里可以利用Vue中的滚动行为，但是前提是你是HTML5 history模式
我们在创建一个router实例的时候，可以提供一个scrollBehavior方法，该方法会在用户切换路由时触发

import Vue from 'vue'
import Router from 'vue-router'

import Home  from '../pages/home'
import Category from '../pages/category'
import Find from '../pages/find'
import Cart from '../pages/cart'
import Mine from '../pages/mine'

import Stock from '../stock/stock'
import StockHome from '../stock/home'

import Support from "../pages/home/support"
import All from "../pages/home/all"

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/home',
      component: Home,
			children:[
				 {
				  path: 'support',
				  component: Supp