Mon App.vue contient le contenu ci-dessous:
<template>
<v-app>
<core-toolbar />
<core-drawer />
<core-view />
</v-app>
</template>
Mais je veux masquer <core-toolbar /> et <core-drawer /> lorsqu'il est acheminé vers la page login. Je prévois d'utiliser v-if pour les masquer. Mais comment puis-je vérifier si l'itinéraire actuel est login?
5 réponses
Oui - Si vous avez utilisé vue-router, vous pouvez utiliser l'objet $route pour vérifier l'URL actuelle.
Vous pouvez enregistrer l'objet route et le vérifier.
J'ajoute un nom aux routes donc
computed: {
isLogin() {
return this.$route.name === 'Login'
}
}
Et
<template>
<v-app>
<core-toolbar v-if="isLogin"/>
<core-drawer v-if="isLogin"/>
<core-view />
</v-app>
</template>
Vous pouvez en obtenir beaucoup d'autres values comme queries / params -
Pour en savoir plus, cliquez ici Vue Router
Vous pouvez utiliser $route.name
<core-toolbar v-show="$route.name!=='login'" />
<core-drawer v-show="$route.name!=='login'" />
Vous pouvez nommer les itinéraires avec un identifiant:
const routes = [
{
path: '/login',
name: 'login’,
component: 'login'
},
];
Ensuite, vous pouvez accéder à this.$route à tout moment pour obtenir des informations sur l'itinéraire actuel, même dans v-if:
<template>
<v-app>
<core-toolbar v-if="$route.name != 'login'" />
<core-drawer v-if="$route.name != 'login'" />
<core-view />
</v-app>
</template>
Vous pouvez accéder à vos données d'itinéraire depuis votre instance Vue
<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>
Inspectez l'objet this. $ Route pour obtenir les bons paramètres dont vous avez besoin.
Vous pouvez utiliser javascript pour obtenir le chemin
isLoginPage(){
var path = window.location.pathname.split('/')[1]
if(path == 'login'){
return true
}
return false
}
Questions connexes
De nouvelles questions
vue.js
Vue.js est un framework Javascript progressif open-source pour la construction d'interfaces utilisateur qui visent à être progressivement adoptées. Vue.js est principalement utilisé pour le développement frontal et nécessite un niveau intermédiaire de HTML et CSS. Les questions spécifiques à la version de Vue.js doivent être étiquetées avec [vuejs2] ou [vuejs3].