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

Question

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

这是 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这个办法：

你失去了像 created、mounted 等生命周期钩子，因为 组件不再从头开始重建。你可以更换 那些带有特定于 keep-alive 的钩子的生命周期钩子 组件

第一种方法

然后您可以通过指定

来指定要保持活动状态的组件

<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>