CODEWITHSUNDEEP
vue.js
Lakmal Premaratne
Lakmal Premaratne

Reputation: 1229

Vue: Hide view components conditionally based on URL

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?

Upvotes: 13

Views: 22999

Answers (6)

Garikai Dzoma
Garikai Dzoma

Reputation: 401

For future reference in Vue3 you need to do the following

import { useRoute } from "vue-router";
import {computed} from "vue";

Then:

const router= userRouter()
const isLogin= computed(()=>router.name==="Login")

Upvotes: 1

Stefano Giraldi
Stefano Giraldi

Reputation: 1309

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.

Upvotes: 5

Toma
Toma

Reputation: 2936

You can name the routes with an id:

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

Then you can access this.$route whenever to get information about the current route, even in v-if:

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

Upvotes: 2

Niklesh Raut
Niklesh Raut

Reputation: 34914

You can use $route.name 

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

Upvotes: 10

Satyam Pathak
Satyam Pathak

Reputation: 6912

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

Upvotes: 24

Abanoub Istfanous
Abanoub Istfanous

Reputation: 966

you can use javascript to get the path 

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

Upvotes: 1

Related Questions