Vue Router Dynamically set Meta

Question

So I have a SPA using Vue and Vue Router. It is set up like an iOS app where when you click deeper into a view the title in the navbar changes. Right now I have this hardcoded in the routes.js file but would like to make it dynmaic. I can update the route meta within my view but that renders after the view is show so I need it to happen before route change. Here is the setup:

route.js

//A route
 {   
      path: '/team/:username', 
      component: require('./views/team-single'),  
      name: 'profile', 
      meta:{ requiresAuth: true, title: 'Team Member', tabbar: false } 
  }

navbar.vue

//if the route has a title show that not the logo
 <div class="navbar-item">

     <transition name="fadeup">
         <h1 v-if="$route.meta.title" class="navbar-title">{{ $route.meta.title }}</h1>
         <img src="/img/hopbak-green.svg" class="navbar-logo"  alt="hopbak" v-else>
     </transition>

 </div>

So ideally it would be nice to pass the :username into the title in the route.js but I dont think thats possible. I have tried adding something like this to a view but like I said it gets called to late:

team-member.vue

mounted(){
   this.$route.meta.title = this.user.username
}

which does change it but not before the navbar already loaded.

Answer 1

I had a similar problem with dynamic url parameters in metadata and I solved it by evaluating the meta attribute of this.$route as function. First configure the meta attribute in this way:

//A route
 {   
      path: '/team/:username', 
      component: require('./views/team-single'),  
      name: 'profile', 
      meta: (route) => ({ requiresAuth: true, title: 'Team Member' + route.params.username, tabbar: false }) 
  }

Then you could use it in your template in this way:

//if the route has a title show that not the logo
 <div class="navbar-item">

     <transition name="fadeup">
         <h1 v-if="$route.meta != null" class="navbar-title">{{ $route.meta($route).title }}</h1>
         <img src="/img/hopbak-green.svg" class="navbar-logo"  alt="hopbak" v-else>
     </transition>

 </div>

Answer 2

After setting the meta, I forced the router to reload like this:

this.$route.meta.title = this.user.username

// Add a temporary query parameter.
this.$router.replace({query: {temp: Date.now()}})
// Remove the temporary query parameter.
this.$router.replace({query: {temp: undefined}})

There are many workarounds to force a reload of the router found in this GitHub issue. This is just one of them.