【Vue】keep-alive缓存路由跳转前的状态与使用陷阱。

前言：保存路由跳转前的状态这种应用场景还是很常遇到的，比如进行商品筛选，筛选出一些后，点击路由跳转到某个商品的详情页，然后返回页面时，我想让之前的页面能展示之前筛选出来的商品。

 

一、代码实现

//路由配置页面代码
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/page/Page1'
import Page2 from '@/page/Page2'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/page1', component: Page1 },
    {path: '/page2', component: Page2 },
  ],
  mode:'history'
})

 

这样就可以保存到路由跳转前的状态了。但是这样有个问题是，如果页面很多的话，并且并不是所有页面都需要保存路由前的状态。

 

二、代码优化

//路由配置页面
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/page/Page1'
import Page2 from '@/page/Page2'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/page1', component: Page1, meta:{ keepAlive:true } },
    {path: '/page2', component: Page2 },
  ],
  mode:'history'
})

这样，我们可以自由控制需要缓存的路由页面了。

 

三、keep-alive使用陷阱

keep-alive里面必须包裹组件，而不能出现其他标签。不然会导致无法缓存页面。