mounted in Vue doesn't want to give a $route.name

user_13544488 0
Viewed 1454

I don't know I'm about quite Vue, spent a day learning all hooks routes, tried throug regular hooks created, mounted and it still gives me null. Here is my component App where all other components are plugged in. I'm calling here mounted hook, so basically it totally rendered this component, and we have a path + I wrapped evrythin in $nextTick just to be sure and it still returns me null name of a current router if I come to the website not from main url, but from children as for instance url/boys. I gave up long time ago getting this name of a router in children component where I need it, thought alright I'll just path it to children <the-nav/> that's where I need it. But it doesnt work event in parent and I need only name of a current router when I enter the website. That's it, sounds easy but went throught hell.

<template>
      <div id="app">
        <the-header/>
        <the-nav/>
        <div id="app__inner">
          <transition name="fade" mode="out-in">
            <router-view />
          </transition>
        </div>
      </div>
    </template>

    <script>
      import TheHeader from "@/components/TheHeader.vue";
      import TheNav from "@/components/TheNav.vue"

      export default {
        components : {
          TheHeader,
          TheNav
        },
        mounted()
        {
          this.$nextTick(() => {
            console.log(this.$router.currentRoute.name);
          })
        }
      }
    </script>
vue-router vue.js
2 Answers
user_25515910

Make sure you have the name set on the router, otherwise name will be undefined. For example...

const routes = [
  { 
    path: "/", 
    component: Home, 
    name: "Home"  // Make sure route is named
  },
];

Then in component you should be able to access the name in mounted hook, without nextTick (like mentioned in comment):

mounted() {
  alert(`Route name is: ${this.$route.name}`);
}

DEMO

user_62940720
Related