CODEWITHSUNDEEP
vue.jsvue-router
MAHEEDHAR A
MAHEEDHAR A

Reputation: 53

How to get route name in vueJS

I am trying to create a script in vueJS, to enable the navbar only when the pages are not login/register.

For this I am trying to use this.$route.name but I only get undefined in the console when I am console logging it. I have created a method to check for the route name and i am calling it when the components are mounted i.e using mounted fucntion.

app.vue code:

<template>
<div id="app">
<NavBar  v-if="flag" />

<main>
  <router-view/>
</main>
</div>
</template>

<script>

import NavBar from './components/NavBar.vue';

export default {
  components: { NavBar },

  data(){
  return{
    flag1 : false,
    flag2 : false,
    flag: false
  }
},
  mounted() {
    let id = localStorage.id;
    this.getrouteflags();
    return {
      id
    }
},
  methods : {
    getrouteflags: function(){
      console.log(this.$route.query.name)
      if(this.$route.name == 'register'){
        this.flag1 = true;
      }
      if(this.$route.name == 'login'){
        this.flag2 = true;
      }
      this.flag = this.flag1 || this.flag2;
      console.log(this.flag1,this.flag2)
    }
  }
}
</script>

<style>
nav{
  
}
#app{
  width: 100%;
  height: 100%;
}
html,
body {
  height: 100%;
  min-height: 75rem;
}

body {
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
  background-image: '../../backend/static/plot.png';
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
body,html{
   padding: 0;
   margin: 0;
   min-height: 100vh;
   width: 100%;
}
html{
   background-color: white;
}

</style>

This is what I am getting in the console.

Console

Can someone help me in resolving this issue?

Upvotes: 0

Views: 1356

Answers (1)

venir
venir

Reputation: 2087

I'm guessing you're using Vue2.

Have you tried adding a computed property:

computed: {
    currentRouteName() {
        return this.$route.name;
    }
}

In case you're using Vue3 with a script setup you could use VueRouter's composable.

<script setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// Do stuff.
</script>

If you need more help, read VueRouter's guide.

Upvotes: 2

Related Questions