weixin_45657461 2019-11-16 11:37 采纳率: 11.1%
浏览 4100

vue单页面怎么返回页面不刷新?

router.js文件

export const pagesRouter = [

  {
    path: '/index',
    name: 'index',
    icon: 'shangpin',
    title: '首页',
    toName: 'index-list',
    component: Main,
    hasChildren: true,
    children: [{
      path: 'list',
      name: 'index-list',
      title: '首页',
      //meta:{requireAuth:true},
      component: resolve => require(['../pages/index/list'], resolve),
    },{
      path: 'index',
      name: 'index',
      title: '首页',
      //meta:{requireAuth:true},
      component: resolve => require(['../pages/index/list'], resolve),
    }]
  },
  {
    path: '/business',
    name: 'business',
    icon: 'zhanghao',
    title: '交易管理',
    toName: 'business-list',
    component: Main,
    hasChildren: true,
    children: [{
        path: 'list',
        name: 'business-list',
        title: '交易记录',
        meta:{
          keepAlive: true, //此组件要被缓存
        },
        //meta:{requireAuth:true},
        component: resolve => require(['../pages/business/list'], resolve),

      },
      {
        path: 'list2',
        name: 'business-list2',
        title: '订单记录',
        meta:{
          keepAlive: true, //此组件要被缓存
        },
        //meta:{requireAuth:true},
        component: resolve => require(['../pages/business/list2'], resolve),
      },
      {
        path: 'list3',
        name: 'business-list3',
        title: '提现交易',
        //meta:{requireAuth:true},
        meta:{
          keepAlive: true, //此组件要被缓存
        },
        component: resolve => require(['../pages/business/list3'], resolve),
      },
      {
        path: 'reconciliation',
        name: 'business-reconciliation',
        title: '财务对账',
        //meta:{requireAuth:true},
        meta:{
          keepAlive: true, //此组件要被缓存
        },
        component: resolve => require(['../pages/business/reconciliation'], resolve),
      },
      {
        path: 'shopmoney',
        name: 'business-shopmoney',
        title: '店铺营业额',
        //meta:{requireAuth:true},
        meta:{
          keepAlive: true, //此组件要被缓存
        },
        component: resolve => require(['../pages/business/shopmoney'], resolve),
      }
    ]
  },

app.vue文件

<keep-alive v-if="isRouterAlive">
      <router-view v-if="$route.meta.keepAlive">

      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive && isRouterAlive">

      </router-view>
  • 写回答

2条回答

  • 纳路透 2019-11-20 10:33
    关注

    keepAlive可以实现

    评论

报告相同问题?

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
  • ¥100 为什么这个恒流源电路不能恒流?
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题