vue中如何做路由缓存

在Vue中，可以通过 `keep-alive` 组件来实现路由缓存。 `keep-alive` 组件是Vue内置的一个组件，可以将其包裹在需要缓存的组件外面，这样在页面跳转时就可以缓存该组件，下次再次进入该组件时不需要重新渲染。

具体实现方法如下：

1. 在 `router/index.js` 文件中设置需要缓存的路由的 `meta` 属性，例如：

   const routes = [
     {
       path: '/home',
       name: 'Home',
       component: Home,
       meta: {
         keepAlive: true // 需要缓存
       }
     },
     {
       path: '/about',
       name: 'About',
       component: About,
       meta: {
         keepAlive: false // 不需要缓存
       }
     }
   ];

2. 在 `App.vue` 文件中包裹需要缓存的组件：

   <template>
     <div id="app">
       <router-view v-if="$route.meta.keepAlive || $route.matched.length === 0" />
       <keep-alive>
         <router-view v-if="!$route.meta.keepAlive && $route.matched.length !== 0" />
       </keep-alive>
     </div>
   </template>

上面的代码中，我们通过判断当前路由的 `meta` 属性来决定是否需要缓存组件。如果需要缓存，则直接渲染 `router-view` 组件；如果不需要缓存，则将该组件包裹在 `keep-alive` 组件内。

这样就可以实现路由缓存了。注意，如果需要缓存的组件中有一些需要重新加载的数据，可以通过 `activated` 钩子函数来触发重新加载数据的逻辑。