Я теряю содержание элементов при навигации по Vue Router - PullRequest
Новая
       25

Я теряю содержание элементов при навигации по Vue Router

0 голосов
/ 22 января 2019

Я пытаюсь создать простой SPA с использованием Vue Router и инфраструктуры Vuetify. У меня есть несколько компонентов, подключенных к моему маршрутизатору. Когда я впервые перезагружаю вид, все работает нормально, но когда я перехожу из этого вида и возвращаюсь, я полностью теряю его содержимое.

Вот 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
        }
      ]
    })

UPDATE

Как отметил Любадр, есть обходной путь с 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>

1 Ответ

0 голосов
/ 23 января 2019

Вы можете использовать <keep-alive>. Подробнее об этом здесь

У этого подхода есть некоторые недостатки :

вы теряете хуки жизненного цикла, такие как созданные , установленные и т. Д. компонент больше не перестраивается с нуля. Вы можете заменить те крючки жизненного цикла с крючками, которые предназначены для поддержания жизни компоненты

Первый подход

Затем вы можете указать, какие компоненты оставить в живых , указав 

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

, где эти компоненты должны иметь соответствующее свойство name: 

name: 'component1'

Второй подход

Мы также можем использовать <keep-alive> с Мета-полями маршрутизации , где у нас есть более детальный контроль в маршрутизаторе, какие компоненты поддерживать в живых (я использовал код из , этот код Linusborg )

Маршрутизатор 

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

Template 

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