Cli在使用keep-alive之后热重载页面空白,如何解决啊
发布于 1 个月前 作者 banyungong 188 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

cli3在使用keep-alive之后热重载页面空白,大家有遇到过吗,如何解决啊。

App.vue

    <keep-alive>
      <router-view :key="key"/>
    </keep-alive>

NewsIndex.vue

<template>
    <div>
        <ul class="cards">
            <li v-for="category in categorys" :key="category.id" class="card">
                <div class="card-title">
                    {{ category.name }}
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { NewsCategory } from './read';

@Component
export default class HealthyNews extends Vue {
    private categorys: NewsCategory[] = [];

    async mounted () {
        this.$toast.loading({
            message: '加载中...'
        });
        await Promise.all([
            this.getCategory()
        ]);
        this.$toast.clear()
    }

    getCategory () {
        return this.$http.get('v1/categorys', {
            pid: 1,
            is_news: 1
        })
            .then(result => {
                if (result.code === 0) {
                    this.categorys = <Array<NewsCategory>>result.list
                }
            })
    }
}
</script>
1 回复

目前用的判断生产模式,开关keep-alive - -

<template>
  <div id="app">
    <template v-if="debug">
      <router-view/>
    </template>

    <keep-alive v-else>
      <router-view :key="key"/>
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class App extends Vue {
  get debug (): boolean {
    return process.env.NODE_ENV !== 'production'
  }

  get key (): string {
    return this.$route.fullPath
  }
}
</script>

<style lang="scss">
</style>
回到顶部