How to change a variable in a template from a router?

Question

Vue.js

There is App.vue:

<template>
  <div id="app">
    <Header-Component></Header-Component>
    <router-view></router-view>
  </div>
</template>

<script>
    import router from './router'
    import Vue from 'vue'
    import HeaderComponent from './components/Header'
  
    import axios from 'axios'

    export default {
        name: 'app',
        router,
        components: {
            HeaderComponent
        }
    }
</script>

head.vue:

<template>
<div>
  {{ModuleName}}
</div>
<template>

Routing looks like this:

const router = new Router({
    'mode': 'history',
    'routes': [{
            path: '/',
            component: SearchPage,
        },
        {
            path: '/analytic',
            component: AnalyticPage,
        },
    ]
})
export default router

How do I change the name of the `ModuleName` from the routing. On the search page, write: "Search", and on the Analytics page: "Analytics". If `ModuleName` were in each component, there would be no questions. And then somewhere the global one turns out to be needed, and it also needs to be set up from the routing somehow.

Answer 1

Route metadata can be used :

routes: [
  {
    ...
    meta: { pageTitle: 'hello, world!!' },
  },
  {
    ...
    meta: { pageTitle: 'fuck the world' },
  },
  ...
],

<div>{{ $route.meta.pageTitle }}</div>