Отдельный компонент Dashbord и Forum от компонента App в vuejs

Question

Есть ли способ монтировать несколько компонентов на один экземпляр 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");

Затем в моем Приложение. 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>

На форуме. vue

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

Администратор. vue

<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 
                }
            ]
        },

Как динамически go к каждому маршруту и ​​монтировать каждый компонент на el: #app?

Answer 1

Не изменяя маршрутизацию и структуру шаблона, вы можете использовать CSS, чтобы скрыть заголовок приложения, нижний колонтитул.

Другой вариант может быть v-if заголовок приложения, нижний колонтитул, чтобы не отображать, когда на них маршруты используют что-то вроде $router.currentRoute для сопоставления.

CSS

/* 
Assuming app header and footer have an id attribute
  Change to your needs
*/
#app-header,
#app-footer {
  display: none;
}

v-if on currentRoute

Здесь нужно сделать несколько вещей.

• Создание переменной данных (showMe: true)
• Создание метода (evaluateShowMe)
• Создание наблюдателя для маршрута ('$route'()) Будьте в курсе цитат!

Примечание: не стесняйтесь переименовывать переменную и функцию в соответствии с вашими потребностями.

Нам нужно следить $route потому что это вне <router-view/>, поэтому нам нужно сделать это динамически, чтобы переменная выполняла функцию оценки каждый раз, когда меняется маршрут.

App. vue:

<template>
<div>
  <div class="general-page">
    <AppHeader
      v-if="showMe"
    ></AppHeader>
      <transition name="fade">
        <router-view></router-view>
    </transition>
    <AppFooter
      v-if="showMe"
    ></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
  },
  data() {
    return {
      showMe: true
    }
  },
  methods: {
    evaluateShowMe() {
      // Get the substring of the path between first and second slash
      // This will allow to include any child pathing
      // NOTE: In my test the first index ([0]) was empty so used one ([1]) for the `filter`
      const entryPath = this.$router.currentRoute.path.split('/').filter((x,i) => i === 1);

      // We want to exclude the following paths i.e. hide when on these
      // There should only be one item in the array so we extract with `[0]`
      return (entryPath[0] !== 'admin' || entryPath[0] !== 'forum');
    }
  },
  watch: {
    '$route'() {      
      this.showMe = this.evaluateShowMe();
    }
  }
};
</script>