防止在历史记录中加载初始数据

Question

有Home.vue 和Statistics.vue 页面。 Home.vue 渲染 TableFields.vue 组件。在Home.vue，页面加载时设置了初始值为“3”的数字。设置间隔函数每两秒添加和计算一次数字。如何实现这些计算出来的数字在从首页到统计页面并返回后保持不变，并且只有在页面刷新后才重置？路由器index.js文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import TableFields from '../components/TableFields.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: TableFields
  },
  {
    path: '/statistics',
    name: 'Statistics',
    // route level code-splitting
    // this generates a separate chunk (statistic.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "statistic" */ '../views/Statistics.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

App.vue 文件：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/statistics">Statistics</router-link>
    </div>
    <router-view :changesA.sync="changesA" :changesB.sync="changesB" />
  </div>
</template>

项目回购：link

Answer 1

一种方法是使用keep-alive组件到router-view组件：

在你的 App.vue 中：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/statistics">Statistics</router-link>
    </div>

    <keep-alive>
        <router-view :changesA.sync="changesA" :changesB.sync="changesB" />
    </keep-alive>
  </div>
</template>