Как поменять переменную в шаблоне из роутера?

Question

[beduin01]

Есть 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>

Роутинг выглядит так:

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

Как мне из роутинга поменять название `ModuleName`. На странице поиска написать: "Поиск", а на странице Аналитики: "Аналитика". Если бы `ModuleName` был в каждом компоненте свой вопросов бы не было. А тут где-то глобальный получается нужен и еще из роутинга его нужно как-то выставить.

Comments

[DevMan]

как же так случилось, что приходится побираться по мерзкому жс/его производных, а не божественным wasm и d?
неужели реальность столкнулась с воображением, и победила?

Answer 1

[0xD34F]

Можно использовать метаданные маршрутов:

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

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