Question

我对 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>

然后我的 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>

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

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

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

Answer 1

“正确”的方法（当您制作这样的类似 SPA 的迷你应用程序时）是使用 vue-router 及其 <router-view> 组件。该组件根据活动路由自动加载您在路由文件中指定的组件，并配有方便的生命周期钩子来加载/初始化数据，或在路由进入之前取消/重定向未经授权的路由。

然后，您还可以使用 to prop on <v-list-item> 将导航作为 vue-router 的链接处理。

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

Vue 处理侧边栏导航加载

1 个答案: