当我通过 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

这种方法有个：

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, where we have more granular control in the router on which components to keep alive (I've used the code from 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>

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

I'm losing content of the elements when I'm navigating by Vue Router

javascript

reload

vue.js

vue-router