路由器中的Vue重用组件-未被安装

Question

我想在路由器的两个不同项目中重用组件。为了具有不同的功能，我传递了一个不同的道具：

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/users',
            name: 'Users',
            component: UsersTableComponent,
            props: { componentType: "users" },
        },
        {
            path: '/clients',
            name: 'Clients',
            component: UsersTableComponent,
            props: { componentType: "clients" },
        },
        {
            path: '/bills',
            name: 'Bills',
            component: billsComponent,
        },
    ]
});

在UsersTableComponent中，我想在生命周期的开始执行一些操作（例如从api加载列表：

mounted() {
    this.init();
},

如果我导航至bills，然后导航至clients，则会调用mounted()，一切都很好。

但是，如果我在clients和users之间切换，则不会再次调用mounted()。

我发现的唯一解决方案是用两个虚拟组件包装组件，但是我正在寻找更优雅的解决方案。有什么主意吗？

===更新====这是UsersTableComponent的代码：

<template>
    <div>
        <h3>{{ componentType }}</h3>
    </div>
</template>

<script>
    export default {
        props: {
            componentType: {
                type: String,
                required: true
            }

        },

        mounted() {
            console.log("Mounted! - ", this.componentType);
            this.init();
        },

        beforeDestroy() {
            console.log("beforeDestroy");
        },
        destroyed() {
            console.log("destroyed");
        },


        methods: {
            init() {
                console.log("init");
            },
        },
    };
</script>

我不认为这与我的问题有关，无论如何我都使用element-ui，所以菜单显示如下：

<el-aside>
    <el-menu :router="true" :default-active="$route.path">
        <template v-for="rule in routes">
            <el-menu-item :index="rule.path">
                <span slot="title">{{ rule.name }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</el-aside>

Answer 1

请参阅已完全回答的问题Same component with different routes 。>>