在路由器视图中有条件地渲染组件

Question

我正在研究 Vue3，我是 VueJS 的新手。所以默认情况下我有一个 App.vue 组件，所有组件都在其中渲染，但我有一个 Login.vue 并且我不想为 login.vue 渲染 <header></header> 部分。将 Login.vue 视为静态组件！

App.vue

<template>
      <header >
        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

        <div class="wrapper">
          <HelloWorld msg="Knowledge Base System for IFIC Bank" />

          <nav>
            <RouterLink to="/">Home</RouterLink>
            <RouterLink to="/about">About</RouterLink>
            <RouterLink to="/login">login</RouterLink>
          </nav>
        </div>
      </header>

    <RouterView/>
</template>

Answer 1

您可以将 header 提取到一个组件中，然后将其传递到其他组件中。您可以在那里使用或不使用 header 组件。

Answer 2

<script>
import { useRoute } from "vue-router";
export default {
  setup() {
    let route = useRoute();
    return { route };
  }
};
</script>

或设置

<script setup>
import { useRoute } from "vue-router";
let route = useRoute();
</script>

然后是你的模板

<template>
  <header v-if="route.path !== '/login'">
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Knowledge Base System for IFIC Bank" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/login">login</RouterLink>
      </nav>
    </div>
  </header>

<RouterView/>

在您的设置函数中使用 useRoute、return。

现在您可以使用 route.path 和 v-if

Answer 3

我认为最好的方法是使用你的路由元数据。这样，该解决方案可在其他上下文中重复使用，而不是特定于登录路由。

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Header,
      meta: { hideHeader: true }
    }
  ]
})

并添加 v-if 和 !route.meta.hideHeader

<script setup>
    import { useRoute } from "vue-router";
    let route = useRoute();
</script>

<template>
  <header v-if="!route.meta.hideHeader">
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Knowledge Base System for IFIC Bank" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/login">login</RouterLink>
      </nav>
    </div>
  </header>
</template>

在路由器视图中有条件地渲染组件

Conditionally rendering component in router view

javascript

vue.js