Vue .js dynamic page title

Question

Trying to change page title depending on URL params in VueJS project.

In router have the folowing path:

 {
   path: '/:location',
   name: 'home_spec',
   components: { default: Home, header: StarterNavbar, footer: StarterFooter },
 }

and pushing location to title also in router:

router.beforeEach((to, from, next) => {
  if (to.params.location){
    document.title = `${to.params.location}`
  }else{
    document.title = "Default title"
  }
  next()
})

in index.html have

 <title><%= htmlWebpackPlugin.options.title %></title>

And it works fine (tab has desireable title ) BUT sourcecode (CTRL+U) has the default title as in the package,js name parameter.

Is it possible to send the first html page with the desirable title in SPA? If the answer is no, what about SEO is it critical for searching robots?

Answer 1

Maybe try another way of setting page title? for example u can do:

  {
   path: '/:location',
   name: 'home_spec',
   components: { default: Home, header: StarterNavbar, 
                 footer:StarterFooter },
   meta: { pageTitle: 'example' }

  router.beforeEach((to, from) => {
   document.title = to.meta.title;
   } )