vue3，通过页面的按钮事件，在左侧栏目里增加菜单怎么实现？

Question

vue3，通过页面的按钮事件，在左侧栏目里增加菜单怎么实现？

如下图：

---

现在的思路是通过router.addRoute()方法，添加数据，数据添加成功后，使用router.getRoutes()方法能获取新数据，但是左侧菜单没有显示新数据的菜单项？

问：router.addRoute()能在vue页面使用吗，还是只能在router/index.ts里通过接口的数据动态添加路由？

Answer 1

改成“新建系统”后，刷新页面，菜单的数据从接口获取了。

Answer 2

<template>
    <TestMenu :menus="menus"  />

    <div @click="addMenu()">添加</div>
</template>

<script>
import {ref} from "vue";
import TestMenu from './TestMenu.vue'

export default {
    components: {TestMenu},
    setup() {

        const menus = ref([{
            id: 1,
            name: '带单1'
        }, {
            id: 2,
            name: '带单2'
        }]);

        const addMenu = () => {
            menus.value.push({
                id: 3,
                name: '带单3'
            });
        }

        return {menus, addMenu}
    },
}
</script>

<template>
    <div>
        <ul>
            <template v-for="(item, index) in menus" :key="index">
                <li>{{item.name}}</li>
            </template>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['menus']
}
</script>