Javascript VueJS-根据路由加载不同的组件

我有以下设置：

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<template lang="html">
  <div class="">
    <app-navbar></app-navbar>
    <div style="margin-top: 64px">

      <home></home>

      <div class="container">
        <app-footer></app-footer>
      </div>
    </div>
  </div>
</template>

<script>
  import Home from './Home.vue'
  import Navbar from './shared/Navbar.vue'
  import Footer from './shared/Footer.vue'

  export default {
    components: {
      Home,
      'app-navbar': Navbar,
      'app-footer': Footer
    }
  }
</script>

因此，默认路由是主要的，我有“公共”组件（导航栏和页脚）

Main.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<template lang="html">
  <div class="">
    <app-navbar></app-navbar>
    <div style="margin-top: 64px">

      <home></home>

      <div class="container">
        <app-footer></app-footer>
      </div>
    </div>
  </div>
</template>

<script>
  import Home from './Home.vue'
  import Navbar from './shared/Navbar.vue'
  import Footer from './shared/Footer.vue'

  export default {
    components: {
      Home,
      'app-navbar': Navbar,
      'app-footer': Footer
    }
  }
</script>

---

最好的方法是什么？

根据您的设置，解决此问题的一个简单方法是在路由器中使用

meta

属性。例如，您的登录路径将如下所示：

{
    path: "/login",
    name: 'login',
    meta: {
        NoNavbar: true,
        NoFooter: true
    },
    component: AdminLogin,
},

然后在

Main.vue

中，可以根据以下条件渲染组件：

<template v-if="!this.$router.resolve(this.$route.path).route.meta.NoNavbar">
    <app-navbar></app-navbar>
</template>

对于页脚：

<template v-if="!this.$router.resolve(this.$route.path).route.meta.NoFooter">
    <app-footer></app-footer>
</template>

免责声明

尚未在本地测试此功能，但它可以为您提供一个想法：）

---

下面是一个示例，说明如何制作用作应用程序布局的组件：

<div id="app">
    <template v-if="!this.$router.resolve(this.$route.path).route.meta.NoNavbar">
        <app-navbar></app-navbar>
    </template>

    <main>
        <router-view></router-view>
    </main>

    <template v-if="!this.$router.resolve(this.$route.path).route.meta.NoFooter">
        <app-footer></app-footer>
    </template>
</div>

---

通过这种方式，您首先基于当前路由应用布局，然后在

标记内仅呈现主要组件。

您好，请点击此处，以获取回复。。。这并不是我想要的，因为我有很多路径，我必须在每个组件中指定：（我也可以在所有组件中使用导航栏/页脚……还有其他“通用”吗方法？或者我尝试的整个方法都是错误的？我不会说你的方法是错误的。有不同的方法可以做到这一点，你应该看看什么最适合你。我假设Main.vue在你的情况下就像一个父组件。也许，你可以将它提取到一个父组件中，作为你所有应用程序的布局。然后，你可以使用se vue路由器只更新页面的块。我将在前面的答案中添加一个示例。我正在考虑使用一个标志来决定显示哪一个。bec将有一个用于“公共”端，另一个用于“私有”端…我将尝试使用一个标志

v-if=“page==public”…v-else-if=“page==private”…v-else

这样，我将只在一个地方拥有它一次（我希望是D），而不必在多个地方管理它。是的，Main.vue就像一个基本布局，其他所有内容都将在其中投影