Vue: Hide view components conditionally based on URL

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


You can use $route.name

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

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.

Tags:

Vue.Js