Question

我对VueJS道具和数据共享仍然有些困惑。说我有这个简单的组件，它显示了配置文件列表。每个配置文件都有自己的页面，该页面由名称定义，并通过router-link链接到该页面。

<template>
    <div class="card">
        <div class="card-body">
            <table class="table">
                <tbody>
                    <tr>
                        <th>Profile ID</th>
                        <th>Actions</th>
                    </tr>
                <tr v-for="profile in profiles.data" :key="profile.id">
                    <td>{{profile.id}}</td>
                    <td>
                        <router-link :to="{ name: profile.name, params: {
                             profileImage: profile.image }}" 
                             tag="a" exact> View Profile
                        </router-link>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                profiles: {}
            }
        },
        methods: {
            loadProfiles() {
                axios.get("api/profile").then(({data}) => (this.profiles = data));
            },
        created() {
            this.loadProfiles();
        }
    }
</script>

因此，当您单击一个配置文件链接时，我会根据配置文件名称进入类似localhost：8000 / profile-1的页面（在这种情况下，我假设名称为profile-1）。您会注意到，我传递了一个profileImage参数，这是与此配置文件关联的图像文件位置。

所以通用配置文件组件就是这样

<template>
    <div id="capture">
        <div class="row">
            <div class="col-12` ">
                <image :file-name = this.fileName></barchart>
            </div>
        </div>
    </div>
</template>

<script>
    import Image from '../components/Image';

    export default {
        components: {
            'image': Image
        },
        data() {
            return {
                fileName: ''
            }
        },
        created() {
            this.fileName = this.$route.params.fileName;
        }
    }
</script>

非常简单，包含一个Image组件，它将显示该配置文件的图像。我不会全部展示，但是Image组件采用以下结构

<template>
    <div>
        <div id="chart">
            <div id="barchart-container">
            </div>
        </div>
    </div>
</template>

<script>
    import * as d3 from 'd3';

    export default {
        props: {
            fileName: {
                type: String,
                required: true
            }
        },
        methods: {
            generateImage () {
               ...   
            }
        },
        created() {
            this.generateImage();
        }
    };
</script>

所以我的问题是，如果我单击链接，最终将进入个人资料页面。显示图像。一切都很好。但是，如果我随后刷新页面，该图像将不再显示，并且我收到一条错误消息，指出该组件需要其道具。

那么我该怎么做才能确保道具不会丢失页面刷新。这甚至是我采用的正确方法吗？

谢谢

保持道具数据在页面上刷新

0 个答案: