Vue.js 将Dashbord和论坛组件与vuejs中的应用程序组件分离

是否有方法在单个vue实例上装载多个组件。 我有我的管理仪表板和论坛页面，我不希望标题和导航显示在这些页面上

以下是我尝试过的：

import App from "./App.vue";
import Admin from "./Admin.vue";
import Forum from "./Forum.vue";

const app = new Vue({
    router,
    store,

    components: {
      App, Admin, Forum
    }
}).$mount("#app");

然后在我的App.vue中，我有其他子组件

<template>
<div>
  <div class="general-page">
    <AppHeader></AppHeader>
      <transition name="fade">
        <router-view></router-view>
    </transition>
    <AppFooter></AppFooter>
  </div>
</div>
</template>

<script>
import AppHeader from "./components/AppHeader";

import Login from "./components/Login.vue";
import Register from "./components/Register.vue";

import AppFooter from "./components/AppFooter.vue";

export default {
  components: {
    AppHeader,
    Login,
    Register,
    AppFooter
  }
};
</script>

---

如何动态地转到每个路由并在

el:#app

？

上装载每个组件而不更改任何路由和模板结构，您可以使用CSS隐藏app页眉、页脚

另一个选项可能是

v-if

应用程序页眉、页脚，以便在这些路由上使用类似

$router.currentRoute

的内容进行匹配时不呈现

CSS

/*
假设应用程序页眉和页脚具有id属性
改变你的需要
*/
#应用程序标题，
#应用程序页脚{
显示：无；
}

当前路径上的v-if 我们必须在这里做一些事情

• 创建数据变量（

  showMe:true

  ）
• 创建一个方法（

  evaluateShowMe

  ）
• 为路由创建一个观察者（

  “$route”（

  ）请注意引号

注意：可以随意重命名变量和函数以满足您的需要

我们需要观察

$route

，因为这不在

范围内，所以我们需要动态地执行此操作，以便变量在每次路由更改时执行计算器功能

App.vue：

从“/components/AppHeader”导入AppHeader；
从“/components/Login.vue”导入登录名；
从“/components/Register.vue”导入寄存器；
从“/components/AppFooter.vue”导入AppFooter；
导出默认值{
组成部分：{
AppHeader，
登录，
登记
AppFooter
},
数据（）{
返回{
真的吗
}
},
方法：{
evaluateShowMe（）{
//获取第一个和第二个斜杠之间的路径的子字符串
//这将允许包含任何子路径
//注意：在我的测试中，第一个索引（[0]）是空的，因此使用了一个（[1]）作为“过滤器”`
const entryPath=this.$router.currentRoute.path.split（'/'）.filter（（x，i）=>i==1）；
//我们希望排除以下路径，即在这些路径上隐藏
//数组中应该只有一个项，因此我们使用“[0]进行提取`
return（entryPath[0]！='admin'| | entryPath[0]！='forum'）；
}
},
观察：{
“$route”（）{
this.showMe=this.evaluateShowMe（）；
}
}
};

在不更改任何路由和模板结构的情况下，您可以使用CSS隐藏应用程序的页眉、页脚。另一个选项可能是

v-if

应用程序的页眉、页脚，以便在这些路由上使用类似

$router.currentRoute

的内容进行匹配时不进行渲染。你能为$router.currentRoute编写一小段代码吗？我对vuejs不太熟悉路由的工作原理。这实际上更好，而且它可以工作。谢谢

<template>
<div>
  <div class="forum-page">
    <ForumHeader></ForumHeader>
      <transition name="fade">
        <router-view></router-view>
    </transition>
    <ForumFooter></ForumFooter>
  </div>
</div>
</template>

<script>
import ForumHeader from "./components/ForumHeader";

import ForumFooter from "./components/ForumFooter.vue";

export default {
  components: {
    ForumHeader,
    ForumFooter
  }
};
</script>

<template>
<div>
  <div class="admin-page">
    <AdminHeader></AdminHeader>
      <transition name="fade">
        <router-view></router-view>
    </transition>
    <AdminFooter></AdminFooter>
  </div>
</div>
</template>

<script>
import AdminHeader from "./components/AdminHeader";

import AdminFooter from "./components/AdminFooter.vue";

export default {
  components: {
    AdminHeader,
    AdminFooter
  }
};
</script>

{
            path: '/admin',
            name: 'Admin',
            component: Admin,
            meta: {
                requiresAuth: true
            },
            children: [
                { 
                    path: '', 
                    name: 'Profile',
                    component: Profile
                },
                { 
                    path: 'uploads',
                    name: 'Uploads',
                    component: Uploads,
                    meta: {
                        requiresCreatorAccess: true
                    } 
                },
                { 
                    path: 'add-post',
                    name: 'AddPost',
                    component: AddPost,
                    meta: {
                        requiresCreatorAccess: true
                    } 
                }
            ]
        },

        {
            path: '/forum',
            name: 'Forum',
            component: Forum,
            children: [
                { 
                    path: '', 
                    name: 'Channel',
                    component: Channel
                },
                { 
                    path: 'threads',
                    name: 'Threads',
                    component: Threads
                },
                { 
                    path: 'topic',
                    name: 'Topic',
                    component: Topic 
                }
            ]
        },