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

如何解决VueJS-根据路线加载不同的组件

我有此设置：

App.vue

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

这是我的默认页面。我希望加载两个不同的布局（管理员和公共）。它工作正常，但公共布局存在一个小问题。因为我很想在所有公共组件/页面中共享NAVBAR和FOOTER，但我不想在所有组件中复制它们。

routes.js

import ...
export const routes = [
// public
  { path: "",name: 'main',component: Main},{ path: "/about",name: 'about',component: About},// private
  { path: "/login",name: 'login',component: AdminLogin},{ path: "/admin",name: 'admin',component: AdminHome}
]

因此默认路由是MAIN，其中包含“公共”组件（导航栏和页脚）

Main.vue

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

我只想根据所选路线更改“中间”中的内容。因此，默认值为<home>。但是，如何使其随路线改变？因此，例如，当我转到ABOUT时？我不希望我的所有页面都具有这种结构->导航栏，内容，页脚，因为导航栏和页脚在各处都是多余的。还是将其添加到任何地方都是正确的方法？

或者我可以在Main.vue中做类似的事情吗？

navbar

case 
 when route == 'about' then import(about)
 else import(home)
end

footer

做到这一点的最佳方法是什么？

解决方法

根据您的设置，解决此问题的一种简单方法是在路由器中使用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>标签内仅呈现主要组件。