Предотвращение начальной загрузки данных при возвращении истории - PullRequest
Новая
       4

Предотвращение начальной загрузки данных при возвращении истории

1 голос
/ 15 апреля 2020

Есть Home.vue и Statistics.vue страницы. Home.vue рендерит компонент TableFields.vue. На Home.vue есть числа с начальным значением «3», установленным при загрузке страницы. Задать интервал функция добавляет и вычисляет числа каждые две секунды. Как добиться того, чтобы эти рассчитанные числа оставались после перехода с домашней страницы на страницу статистики и обратно и сбрасывались только после обновления страницы sh? Маршрутизатор 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

Приложение. 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>

Репозиторий проекта: ссылка

1 Ответ

0 голосов
/ 15 апреля 2020

Одним из способов является использование keep-alive компонента для router-view компонента:

В вашем приложении. 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>
...