若依框架中实现跳转加缓存

打开src/api/router/index.js路由配置项，找到对应的路由配置，添加noCache: true参数，示例如下：

{
  path: '/storage',
  component: Layout,
  hidden: true,
  redirect: 'noredirect',
  children: [
    { 
      path: '/order',
      component: () => import('@/views/storage/order'),
      name: 'aterial',
      meta: { title: '入库计划单', icon: 'user'}
    },
    {
      path: '/inventory',
      component: () => import('@/views/storage/inventory'),
      name: 'inventory',
      meta: { title: '收货清点', noCache: true, icon: 'user'}  // 添加 noCache: true
    }
  ]
}

在上述示例中，noCache: true表示每次跳转都刷新缓存，默认是false。这样设置后，在进行路由跳转时就不会使用缓存，而是每次都获取最新的数据。

另外，若依框架中还可能存在一些页面跳转缓存问题，以下是一些常见的解决方法：

• 问题：带参数打开同一个页面时，页面会一直显示上一个页面的结果。

  解决办法 1：在菜单里面配置页面不缓存，即修改meta参数nocache: true。示例如下：

    /**
     * hidden: true // 当设置 true 的时候该路由不会再侧边栏出现如 401、login 等页面，或者如一些编辑页面/edit/1
     * alwaysShow: true // 当一个路由下面的 children 声明的路由大于 1 个时，自动会变成嵌套的模式（如组件页面）；只有一个时，会将那个子路由当做根路由显示在侧边栏（如引导页面）；若想不管路由下面的 children 声明的个数都显示根路由，可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
     * redirect: noRedirect // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
     * name: 'router-name' // 设定路由的名字，一定要填写，不然使用<keep-alive>时会出现各种问题
     * query: '{"id": 1,"name": "ry"}' // 访问路由的默认传递参数
     * meta: {
     *   nocache: true // 如果设置为 true，则不会被<keep-alive>缓存（默认 false）
     *   title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字
     *   icon:'svg-name' // 设置该路由的图标，对应路径 src/assets/icons/svg
     *   breadcrumb: false // 如果设置为 false，则不会在 breadcrumb 面包屑中显示
     *   activemenu: '/system/user' // 当路由设置了该属性，则会高亮相对应的侧边栏
     * }
     */

  解决办法 2：若设置nocache: true还是无效，可以通过删除全局缓存参数里面的 key 解决缓存问题。在跳转离开页面之前的钩子函数beforeRouteLeave中添加以下代码：

    beforeRouteLeave(to, from, next) {
      // 清缓存
      if (to.name === "目标路由的名称") {
        try {
          var cache = this.$vnode.parent.componentInstance.cache;
          var key = "";
          for (var prop in cache) {
            if (prop.lastIndexOf("目标路由的名称") > 0) {
              key = prop;
            }
          }
          if (key!== "") {
            delete cache(key);
          }
        } catch (error) {}
        this.$destroy();
      }
      next();
    },

  需要注意的是，在实际使用中，应根据具体情况选择合适的解决方法，并确保路由配置的正确性。同时，若页面中存在通过eventbus传递信息等特殊情况，可能还需要对相关代码进行适当调整，以避免出现数据覆盖等问题。