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?

If you're using vue-router, the app component (v-app in this case) should contain a router-view. Updating the route causes vue-router to render a specific view component into the router-view (e.g., it renders a LoginView component for the /login route). You could just omit the core-toolbar and core-drawer components from LoginView instead of using v-if. — tony19
– tony19, Commented Jun 20, 2019 at 7:48

Satyam Pathak · Accepted Answer · 2019-06-20 07:36:08Z

24

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 -

Comments

Niklesh Raut · Accepted Answer · 2019-06-20 07:37:16Z

10

You can use $route.name

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

answered Jun 20, 2019 at 7:37

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

5 Comments

Satyam Pathak Over a year ago

v-show is like display: none/block, if user is on login page can view components just by toggling in dev-tools

Niklesh Raut Over a year ago

@SatyamPathak : You are absolutely right, but there will be no harm of data. which is protected from server end. so its okay to load first and then after login it will display fast with after getting data from server.

Satyam Pathak Over a year ago

I am not convinced with this approach as 1 - Browser will anyhow re-paint the page as user will be redirected to different page. 2 -Methods related to hidden module will no longer encapsulated and can be triggered which probably throw errors.

Niklesh Raut Over a year ago

@SatyamPathak: you are again right I respect your thought, but I still think it is not necessary In this situation to display menu items. Also OP says two contradict sentence I want to hide <core-toolbar /> and <core-drawer /> and I am planning to use v-if to hide them. All ideal things not goes as ideal, but it should be. In Programming we can do one things in unlimited ways, it depends how our ultimate goal is. did you read tony19's comment above with question.

Satyam Pathak Over a year ago

Yes, I did and that's why I re-edited the question for future references.

Stefano Giraldi · Accepted Answer · 2019-06-20 07:48:16Z

5

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.

edited Jun 20, 2019 at 7:48

answered Jun 20, 2019 at 7:40

Stefano Giraldi

1,3293 gold badges14 silver badges23 bronze badges

1 Comment

Satyam Pathak Over a year ago

Never heard about f-if !! It's probably - v-if

Toma · Accepted Answer · 2019-06-20 07:46:44Z

2

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>

edited Jun 20, 2019 at 7:46

answered Jun 20, 2019 at 7:38

Toma

2,9454 gold badges27 silver badges46 bronze badges

1 Comment

Satyam Pathak Over a year ago

You don't need this in html section

Abanoub Istfanous · Accepted Answer · 2019-06-20 07:35:47Z

1

you can use javascript to get the path

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

answered Jun 20, 2019 at 7:35

Abanoub Istfanous

9969 silver badges24 bronze badges

1 Comment

Toma Over a year ago

Not a good idea to use the pathname. What if OP is using the hash mode for the router in production? Then your path variable is going to be '#'.

Garikai Dzoma · Accepted Answer · 2021-11-22 06:08:05Z

1

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

answered Nov 22, 2021 at 6:08

Garikai Dzoma

4811 gold badge3 silver badges8 bronze badges

1 Comment

JCisar Over a year ago

router.name points to the name in your routes. Use const route = useRoute(); and route.path === "/login" to match the url path.

Collectives™ on Stack Overflow

Vue: Hide view components conditionally based on URL

6 Answers 6

Comments

5 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

5 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related