Vue: Hide view components conditionally based on URL

Question

My App.vue contains below content:

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

But I want to hide <core-toolbar /> and <core-drawer /> when it is routed to login page. I am planning to use v-if to hide them. But how can I check whether the current route is login?

Answer 1

Yes - If you used vue-router, you can use the $route object to verify current URL.

You can log the route object and verify.

I add name to routes so

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

and

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

You can get many more values like queries / params -

Read more here Vue Router

Answer 2

You can access your route data from your Vue instance

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

Inspect the object this.$route to get the right params you need.

Answer 3

You can use $route.name

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

Answer 4

you can use javascript to get the path

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