时间戳

首页 > 解决方案 > 防止在历史记录中加载初始数据

vue.js - 防止在历史记录中加载初始数据

问题描述

有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

应用程序.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>

项目回购：链接

标签： vue.jsvue-router

解决方案

一种方法是使用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>

推荐阅读