Quasar QTable 从子组件返回后丢失状态答案

【问题标题】：Quasar QTable lost state after returning from child componentQuasar QTable 从子组件返回后丢失状态
【发布时间】：2020-10-04 02:16:56
【问题描述】：

我有一个 QTable 呈现链接，用户可以点击进入详细页面并使用后退按钮稍后返回此表。如果我移动到第 2 页并单击链接以查看详细信息页面，则返回时，表格状态将丢失，并再次显示第 1 页。

我曾尝试使用 Keep-Alive，希望组件不会被破坏，但它没有帮助。

我该如何解决这个问题？

【问题讨论】：

标签： vue.js quasar-framework quasar

【解决方案1】：

如果您将表格包装在keep-alive 中，只要该页面处于活动状态，它将保持活动状态。但是，由于您正在导航到另一个页面，因此该表将与包含它的页面一起被销毁。

因此，要实现您的目标，您必须使整个页面保持活力。你可以这样做：

<template>
  <q-page>
    <!-- ... -->
    <q-table ... />
    <!-- ... -->
  </q-page>
</template>
<script>
export default {
  name: 'ThePageYouWantToKeepAlive',
  // ...
}
</script>

keep-alive 有一些道具来管理包含/排除，您可以使用 include 道具来仅包含页面，它接受逗号分隔的列表、数组或正则表达式），你想保持活着。这样您就可以将性能损失降到最低。

<!-- /src/layouts/MainLayout.vue -->
<!-- ... -->
<q-page-container>
  <keep-alive include="ThePageYouWantToKeepAlive">
    <router-view></router-view>
  </keep-alive>
</q-page-container>
<!-- ... -->

下面的演示将有助于更好地了解情况。

// Source: https://codepen.io/yusufkandemir/pen/zYrZOKx?editors=1010
// Adopted from: https://jsfiddle.net/Linusborg/L613xva0/4/

const Foo = {
    name: 'foo',
  template: '<div><p v-for="n in numbers">{{ n }}</p></div>',
  data: function() {
    return {
        numbers: [Math.round(Math.random() * 10), Math.round(Math.random() * 10)]
    }
  }
}

const Bar = {
    name: 'bar',
    template: '<div><p v-for="n in numbers"><strong>{{ n }}</strong></p></div>',
  data: function() {
    return {
        numbers: [Math.round(Math.random() * 10), Math.round(Math.random() * 10)]
    }
  }
}

const Baz = {
    name: 'baz',
  components: {
    Foo
  },
    template: '<div><foo></div>'
}

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/baz', component: Baz }
]

const router = new VueRouter({
  routes
});

const app = new Vue({
  router
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>

<div id="app">
  <ul>
    <router-link to="/foo">
      <li>Go to Foo</li>
    </router-link>
    <router-link to="/bar">
        <li>Go to Bar</li>
    </router-link>
    <router-link to="/baz">
      <li>Go to Baz</li>
    </router-link>
  </ul>

  <keep-alive include="foo">
    <router-view></router-view>
  </keep-alive>
</div>

【讨论】：

【解决方案2】：

需要将表的状态存储在路由或vuex、localStorage的参数中。

【讨论】：