Javascript Vue处理侧栏导航加载

我对Vue和Vuetify还比较陌生，目前我正在使用它们创建一个布局，该布局由左侧的侧导航菜单和右侧的内容加载区域组成。单击导航区域中的一个菜单项时，它应加载到一个新的vue组件中，该组件包含内容加载区域（菜单右侧）中该特定布局的模板。我拼凑了一些似乎有效的东西。。。但我不确定这样做是否“正确”。有谁能在Vue和Vuetify方面做得更好，让我知道我是否应该这样做？ 我的页面模板如下所示：

<template>
    <v-layout class="fill-height">
        <v-navigation-drawer class="grey lighten-4">
            <v-list>
                <v-list-item-group v-model="selectedItem" color="primary">
                    <v-list-item
                        v-for="(item, i) in items"
                        :key="i"
                        @click="SelectMenuItem(item.title)"
                    >
                        <v-list-item-content>
                            <div class="font-weight-bold">
                                <v-list-item-title
                                    v-text="item.title"
                                ></v-list-item-title>
                            </div>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
        </v-navigation-drawer>
        <v-main>
            <v-container ref="container" fluid></v-container>
        </v-main>
    </v-layout>
</template>

<template>
    <div>Documents Editor</div>
</template>

<script>
export default {
    name: 'AdminDocumentsEditor',
};
</script>

然后我的javascript部分如下所示

<script>
import Vue from 'vue';
import AdminDocumentsEditor from '../components/AdminDocumentsEditor.vue';
import AdminPresetsEditor from '../components/AdminPresetsEditor.vue';

const AdminDocumentsEditorClass = Vue.extend(AdminDocumentsEditor);
const AdminDocumentsEditorInstance = new AdminDocumentsEditorClass();

const AdminPresetsEditorClass = Vue.extend(AdminPresetsEditor);
const AdminPresetsEditorInstance = new AdminPresetsEditorClass();

export default {
    name: 'AdminNav',
    components: {
        AdminDocumentsEditor,
        AdminPresetsEditor,
    },
    data() {
        return {
            selectedItem: 0,
            items: [
                {
                    title: 'Documents',
                    icon: 'mdi-table-large-remove',
                    route: '/admindocumentseditor',
                },
                {
                    title: 'Presets',
                    icon: 'mdi-list-status',
                    route: '/adminpresets',
                },
            ],
        };
    },
    methods: {
        RemoveAllChildNodes(parent) {
            while (parent.firstChild) {
                parent.removeChild(parent.firstChild);
            }
        },
        SelectMenuItem(item) {
            this.RemoveAllChildNodes(this.$refs.container);
            if (item === 'Documents') {
                AdminDocumentsEditorInstance.$mount();
                this.$refs.container.appendChild(
                    AdminDocumentsEditorInstance.$el
                );
            } else if (item === 'Presets') {
                AdminPresetsEditorInstance.$mount();
                this.$refs.container.appendChild(
                    AdminPresetsEditorInstance.$el
                );
            }
        },
    },
};
</script>

从“Vue”导入Vue；
从“../components/AdminDocumentsEditor.vue”导入AdminDocumentsEditor；
从“../components/AdminPresetsEditor.vue”导入AdminPresetsEditor；
const AdminDocumentsEditorClass=Vue.extend（AdminDocumentsEditor）；
const AdminDocumentsEditorInstance=新的AdminDocumentsEditorClass（）；
const AdminPreseteSeditor类=Vue.extend（AdminPreseteSeditor）；
const AdminPresetSeditor实例=新的AdminPresetSeditor类（）；
导出默认值{
名称：“AdminNav”，
组成部分：{
管理员，
管理员，
},
数据（）{
返回{
选择编辑项：0，
项目：[
{
标题：“文件”，
图标：“mdi表格大删除”，
路由：'/admindocumentseditor'，
},
{
标题：“预设”，
图标：“mdi列表状态”，
路由：'/adminpresets'，
},
],
};
},
方法：{
RemoveAllChildNodes（父节点）{
while（父母，第一个孩子）{
parent.removeChild（parent.firstChild）；
}
},
选择菜单项（项目）{
this.RemoveAllChildNodes（this.$refs.container）；
如果（项目==‘文件’）{
AdminDocumentsEditor实例。$mount（）；
此.$refs.container.appendChild(
AdminDocumentsEditor实例。$el
);
}否则，如果（项目===‘预设’）{
AdminPresetsEditorInstance.$mount（）；
此.$refs.container.appendChild(
AdminPresetSeditor实例。$el
);
}
},
},
};

最后，我添加/插入的两个组件类目前非常基本。最终，这些将更加复杂，但现在它们只是占位符。但它们看起来像这样：

<template>
    <v-layout class="fill-height">
        <v-navigation-drawer class="grey lighten-4">
            <v-list>
                <v-list-item-group v-model="selectedItem" color="primary">
                    <v-list-item
                        v-for="(item, i) in items"
                        :key="i"
                        @click="SelectMenuItem(item.title)"
                    >
                        <v-list-item-content>
                            <div class="font-weight-bold">
                                <v-list-item-title
                                    v-text="item.title"
                                ></v-list-item-title>
                            </div>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
        </v-navigation-drawer>
        <v-main>
            <v-container ref="container" fluid></v-container>
        </v-main>
    </v-layout>
</template>

<template>
    <div>Documents Editor</div>
</template>

<script>
export default {
    name: 'AdminDocumentsEditor',
};
</script>

文档编辑器
导出默认值{
名称：“AdminDocumentsEditor”，
};

正确的方法（当您制作类似SPA的迷你应用程序时）是使用

vue路由器及其
组件。此组件根据活动路由自动加载您在路由文件中指定的组件，并配有方便的生命周期挂钩，用于加载/初始化数据，或在路由进入之前取消/重定向未经授权的路由

然后，您还可以使用将其作为vue路由器的链接来处理您的导航

注意：当您的应用程序有自己的路由器时（例如，如果您在rails应用程序的单独页面上加载Vue），请确保通过将每个子路径传递到使用Vue的页面，让Vue路由器处理子路径