javascript - 当我通过 Vue Router 导航时，我丢失了元素的内容

Question

我正在尝试使用 Vue Router 和 Vuetify 框架创建一个简单的 SPA。我有几个组件连接到我的路由器。当我第一次重新加载 View 时，一切正常，但是当我从该 View 移开并返回时，我完全丢失了它的内容。

这是 HTML 代码:

<template>
  <v-layout fill-height id="map" class="cadetblue" style="width: 100%">
    <v-dialog v-model="dialog" width="500">
      <v-card>
        <v-img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" height="200px"></v-img>

        <v-card-title primary-title>
          <div>
            <div class="headline">Select layers</div>
            <span class="grey--text">Some layers are avaliable</span>
          </div>
        </v-card-title>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn icon @click="layers = !layers">
            <v-icon>{{ layers ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon>
          </v-btn>
        </v-card-actions>

        <v-slide-y-transition>
          <v-card-text v-show="true">
            <v-checkbox @change="clickMew()" id="dofLayer" label="DOF"></v-checkbox>
            <v-checkbox name="tkLayer" id="tkLayer" label="TK25"></v-checkbox>
          </v-card-text>
        </v-slide-y-transition>
      </v-card>
    </v-dialog>
    <v-flex>
      <v-btn
        absolute
        id="zoomIn"
        @click="zoomIn()"
        dark
        fab
        top
        left
        small
        color="pink"
        class="mt-5"
      >
        <v-icon>add</v-icon>
      </v-btn>
      <v-btn
        absolute
        id="zoomOut"
        @click="zoomOut()"
        dark
        fab
        top
        left
        small
        color="pink"
        class="mt-6"
      >
        <v-icon>remove</v-icon>
      </v-btn>
      <v-btn absolute id="home" @click="home()" dark fab top left small color="green" class="mt-7">
        <v-icon>home</v-icon>
      </v-btn>
      <v-speed-dial
        class="mb-5"
        fixed
        bottom
        right
        direction="top"
        transition="slide-y-reverse-transition"
      >
        <v-btn slot="activator" id="test" color="blue darken-2" dark fab>
          <v-icon>account_circle</v-icon>
        </v-btn>

        <v-btn fab id="addLayer" dark small color="green">
          <v-icon>edit</v-icon>
        </v-btn>

        <v-btn fab @click="dialog = true" dark small color="green">
          <v-icon>layers</v-icon>
        </v-btn>
      </v-speed-dial>
    </v-flex>
  </v-layout>
</template>

这是脚本部分:

import {
  map,
  initMap,
  interactivity,
  zoomIn,
  zoomOut,
  home,
  addHok,
  consoleMsg
} from "../../scripts/cro";

export default {
  data: () => {
    return {
      links: [
        { icon: "account_circle", color: "blue darken-2" },
        { icon: "edit", color: "green" },
        { icon: "add", color: "indigo" }
      ],
      neven: "TEsting Neven",
      dialog: false,
      layers: false
    };
  },
  methods: {
    zoomIn() {
      zoomIn();
    },
    zoomOut() {
      zoomOut();
    },
    home() {
      home();
    },
    clickMew() {
      addHok();
    }
  },
  created() {
    this.$nextTick(() => {
      initMap();
    });
  },
  mounted() {
    this.$nextTick(() => {
      initMap();
      consoleMsg();
      // interactivity();
    });
  }
};

这是路由器页面(router.js):

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from './views/Dashboard.vue'
import Projects from './views/Projects.vue'
import Team from './views/Team.vue'

    Vue.use(Router)

    export default new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [
        {
          path: '/',
          name: 'dashboard',
          component: Dashboard
        },
        {
          path: '/projects',
          name: 'projects',
          component: Projects
        },
        {
          path: '/team',
          name: 'team',
          component: Team
        }
      ]
    })

更新

正如ljubadr 指出的那样，有一些keep-alive 的解决方法。我尝试像这样包装 router-view :

<template>
  <v-app>
    <Navbar></Navbar>
    <Modal></Modal>
    <v-content>
        <keep-alive include="projects">
        <router-view></router-view>
        </keep-alive>
    </v-content>
    <Footer></Footer>
  </v-app>
</template>

这是App.vue

这没有帮助:(

<template>
  <v-app>
    <Navbar></Navbar>
    <Modal></Modal>
    <v-content>
      <keep-alive include="projects">
        <router-view></router-view>
      </keep-alive>
    </v-content>
    <Footer></Footer>
  </v-app>
</template>

<script>
import Navbar from "@/components/NavBar";
import Footer from "@/components/Footer";
import Modal from "@/components/Modal";

export default {
  name: "App",
  components: { Navbar, Footer, Modal }
};
</script>

Answer 1

您可以使用<keep-alive> 。了解更多相关信息here

有some disadvantages对于这种方法:

you lose lifecycle hooks like created, mounted, etc. since the component is not being rebuilt from scratch anymore. You can replace those lifecycle hooks with hooks that are specific to keep-alive components

第一种方法

然后，您可以通过指定

来指定要保持事件状态的组件

<keep-alive include="component1,component2">
  <router-view></router-view>
</keep-alive>

其中这些组件需要具有匹配的 name属性:

name: 'component1'

第二种方法

我们还可以使用<keep-alive>与 Route Meta Fields ，我们可以在路由器中更精细地控制哪些组件保持事件状态(我使用了 this codepen by Linusborg 中的代码)

路由器

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', 
      component: Home,
      meta: { keepAlive: false } 
    },
    { path: '/foo',
      component: Foo,
      meta: { keepAlive: true }
    }
  ]
})

模板

<transition name="fade" mode="out-in">
  <keep-alive v-if="$route.meta.keepAlive">
    <router-view></router-view>
  </keep-alive>

  <router-view v-else></router-view>
</transition>