Question

我有你常用的管理仪表板（Core-UI），我根据自己的需要进行了修改。我有一个＆＃34;旁边＆＃34;每当我在MonitorAside.vue页面上时，我想加载Monitor的组件（我正在使用vue-router）

这是一个小小的破坏。

src/containers/Full.vue导入所有主要组件（包括旁边），然后使用router-view根据路径渲染视图。

src/components/Aside.vue是有问题的组件。它包含固定内容，但如果其他组件需要，我希望动态更改其内容。

src/views/Monitor.vue是有问题的页面，因此是动态需要注入/交换aside组件内容的页面。 请注意，此组件未在Full.vue中导入，而是通过路由器呈现。

每当我在src/views/asides/MonitorAside.vue页面时，

Aside.vue是我想要加载到Monitor的组件。

我将如何做到这一点？

Answer 1

因此，每当vue-router导航到其他页面时，您希望Aside组件的内容发生变化？您可以观看$route值，然后根据您的路线名称呈现内容，例如：

<template>
<div>
    <monitor-aside v-if="page === 'monitor'"></monitor-aside>
    <div v-else>
        <!-- your default aside content -->
    </div>
</div>
</template>

<script>
import MonitorAside from '../views/asides/MonitorAside.vue'
export default {
    data() {
        return {
            page: null
        }
    },
    methods: {
        setContent(routeName) {
            if (routeName === 'Monitor') {
                this.page = 'monitor';
            } else {
                this.page = null;
            }
        }
    },
    created() {
        this.setContent(this.$route.name);
    },
    watch: {
        '$route'(to, from) {
            this.setContent(to.name);
        }
    }
    components: {
        MonitorAside
    }
}
</script>

使用Vue从其他组件中注入组件中的内容

1 个答案: