Vue：根据 URL 有条件地隐藏视图组件

Question

我的 App.vue 包含以下内容：

<template>
  <v-app>
    <core-toolbar />
    <core-drawer />
    <core-view />
  </v-app>
</template>

但我想隐藏<core-toolbar />并且<core-drawer />当它被路由到login页。我打算v-if用来隐藏它们。但是如何检查当前路线是否为login？

Answer 1

是 - 如果您使用了vue-router，则可以使用该$route对象来验证当前 URL。

您可以记录route对象并进行验证。

我将名称添加到路由中

computed: {
  isLogin() {
     return this.$route.name === 'Login'
  }
}

和

<template>
  <v-app>
    <core-toolbar v-if="isLogin"/>
    <core-drawer v-if="isLogin"/>
    <core-view />
  </v-app>
</template>

你可以得到更多values像queries/ params-

在此处阅读更多Vue 路由器

Answer 2

您可以使用 $route.name

<core-toolbar v-show="$route.name!=='login'" />
<core-drawer v-show="$route.name!=='login'" />

Answer 3

您可以从 Vue 实例访问路线数据

<template>
  <v-app>
    <core-toolbar />
    <core-drawer v-if="!isLogin" />
    <core-view v-if="!isLogin"/>
  </v-app>
</template>
<script>
export default {
    computed: {
        isLogin() {
            return this.$route.name == 'login'
        }
    }
}
</script>

检查对象 this.$route 以获取您需要的正确参数。