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?
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.
you can use javascript to get the path
isLoginPage(){
var path = window.location.pathname.split('/')[1]
if(path == 'login'){
return true
}
return false
}
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>
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")