vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)

清疚 2022-12-17 02:24 203阅读 0赞

## keep-alive缓存 ##

在vue中默认router-link进入页面组件都是缓存的。对于数据不会更新的页面，可以使用keep-alive来缓存以提高性能。

在项目src/router/index.js中，对于需要缓存的路由的meta中加上keepAlive: true

export default new Router({
      routes: [
        {path: '/',
          redirect: '/Home',
          meta: {keepAlive: true,}
        },
    ]
    })

<el-main>
    		<keep-alive>
    				<router-view v-if="this.$route.meta.keepAlive"></router-view>
    		</keep-alive>
    		<router-view v-if="!this.$route.meta.keepAlive"></router-view>
    	</el-main>

## 利用beforeRouteLeave动态决定要不要缓存刷新。 ##

要求：首页Home-列表页List-详情页Detail。前进刷新，后退不刷新，且还在原来的滚动位置。

即除了在详情页退到列表页不刷新外，其他方式（搜索、分类、推荐等）进入列表都刷新。

在router/index.js中，Llist路由加上keepAlive: true,

{
          path: '/list/:categoryId?/',
          name: 'List',
          component: List,
          meta: {
            keepAlive: true, 
    },
    {
          path: '/detail/:goodsId',
          name: 'Detail',
          component: Detail
    }

在vue中 beforeRouteLeave (to, from, next) \{ \}

表示在路由页面离开时执行。

其中to表示下一个要进入的路由。form表示当前页面路由。next()表示执行跳转。

我们只需要在函数中判断，只要下一级是Detail则把List的keepAlive设为true，其他设为false即可。

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