• 前进刷新后退不刷新


    1.当从详情页退回列表页的时候,有时候不希望列表页刷新

    // newsList 是list.vue内name属性
    <keep-alive include="newsList"> <router-view/> </keep-alive>

    2.有时候详情页有增删改查的需求,当我们返回列表页的时候,如果修改你了数据,还是需要重新刷新下数据

    // 方案一
    <keep-alive>
        <router-view :key="$route.fullPath"/>
    </keep-alive>
    
    // 详情页退回时使用
    this.$router.push({
        path: '/list',
        query: { 'randomID': 'id' + Math.random() },
    })
    
    
    // 方案二
    {
          path: '/detail',
          name: 'detail',
          component: () => import('../view/detail.vue'),
          meta: {isRefresh: true}
     },
    
    // App.vue 
    // 当我们在详情页中删除了对应的列表项时,就可以将详情页 meta 属性中的 isRefresh 设为 true。这时再返回到列表页,页面会重新刷新 
    watch: {
           $route(to, from) {
               const fname = from.name
               const tname = to.name
               if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
                   from.meta.isRefresh = false
           // 在这里重新请求数据
               }
           }
       },
  • 相关阅读:
    CCF第四题无向图打印路径 欧拉问题
    20160330训练赛
    POJ 3281 网络流dinic算法
    校赛E题递归形式
    Mbx1996
    good luck
    hdu1054 树形dp&&二分图
    补上题代码 hdu1520
    hdu1520 树形dp Anniversary party
    2018 Multi-University Training Contest 2
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/14137592.html
Copyright © 2020-2023  润新知