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 Router

了解更多

Answer 2

您可以使用$route.name

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

Answer 3

您可以使用ID命名路线：

const routes = [
  {
      path: '/login',
      name: 'login’,
      component: 'login'
  },
];

然后，即使在this.$route中，您也可以随时访问v-if以获取有关当前路线的信息：

<template>
  <v-app>
      <core-toolbar  v-if="$route.name != 'login'" />
      <core-drawer  v-if="$route.name != 'login'" />
      <core-view />
  </v-app>
</template>

Answer 4

您可以从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以获取所需的正确参数。

Answer 5

您可以使用javascript获取路径

isLoginPage(){
var path = window.location.pathname.split('/')[1]
if(path == 'login'){
  return true
 }
return false
}

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

5 个答案: