zoukankan      html  css  js  c++  java
  • 前进刷新后退不刷新

    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
           // 在这里重新请求数据
               }
           }
       },
  • 相关阅读:
    有点难度的二分
    请教神牛_字符串hash
    引水进城
    dp的斜率优化
    关于学习oi的一些事项
    永续债
    消费税
    增值税
    BSC交流
    钉钉吐槽功能点
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/14137592.html
Copyright © 2011-2022 走看看