vue.js - 在 VueJS 中隐藏某些路由上的动态布局

Question

我通过以下方式设置动态布局：

LayoutDefault.vue

<template>
 <div class="LayoutDefault">
    <nav>
     .
     . 
     .

   </nav>
    <slot />
  </div>
</template>

LayoutDefaultDynamic.js

import LayoutDefault from './LayoutDefault.vue'

export default {
  name: 'LayoutDefaultDynamic',
  created() {
    this.$parent.$emit('update:layout', LayoutDefault);
  },
  render() {
    return this.$slots.default[0];
  },
};

现在在一些组件中我使用这个布局：

<template>
  <!--  Use layout-defualt component for rendering certain layout in this page-->
  <layout-default-dynamic>
      <v-container fluid class="grid-container">
  .
  .
  .
</layout-default-dynamic>

但是有些组件我不使用任何布局。这就是我的设置方式App.vue：

<template>
  <v-app>
    <component :is="layout">
      <transition name="fade" mode="out-in">
          <router-view :layout.sync="layout" />
      </transition>
    </component>
  </v-app>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      layout: "div",
    };
  }
};
</script>

问题是，当我转到未包含在内的路线（页面）时，<layout-default-dynamic>我仍然可以在它们上看到该布局。有没有办法排除这些路线以在它们上显示此布局？

标签： vue.jsvuejs2

Answer 1

如果我理解正确，您可以在 Vue 路由器中使用嵌套路由。您创建两个布局并将它们添加为顶级路线并向它们添加子路线。我创建了示例应用程序来展示我的案例。

AdminLayout.vue在我的示例中，我创建DefaultLayout.vue了以下内容：

//admin layout.
<template>
  <div>
    <h1>Admin Layout</h1>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "admin-layout"
};
</script>

//default layout.
<template>
  <div>
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>Default Layout</h1>
    <div id="nav">
      <router-link to="/home">Home</router-link>|
      <router-link to="/about">About</router-link>|
      <router-link to="/admin/user">User</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "default-layout"
};
</script>

请注意，每个布局都有自己的<router-view></router-view>.

在路由文件中，我定义了我的路由，例如：

const routes = [
  {
    path: "/",
    name: "default",
    component: DefaultLayout,
    children: [
      {
        path: "/home",
        name: "home",
        component: Home
      },
      {
        path: "/about",
        name: "About",
        component: About
      }
    ]
  },
  {
    path: "/admin",
    name: "admin",
    component: AdminLayout,
    children: [
      {
        path: "user",
        name: "name",
        component: User
      }
    ]
  }
];

现在任何嵌套的路由都/admin将使用AdminLayout和相同的/路由。您可以检查示例：