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
           // 在这里重新请求数据
               }
           }
       },
  • 相关阅读:
    3.7日复习
    作业
    小米官网需要的数据
    EL&JSTL
    变量和运算符
    jsp
    session的应用----验证码
    restframework-总结
    Django-Rest-Framework部分源码流程分析
    Django-Rest-Framework
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/14137592.html
Copyright © 2011-2022 走看看