Правильный способ использовать «реквизит» в VueJS

Question

Я создаю новый проект, используя VueJS в первый раз, и пытаюсь использовать панель инструментов на всех моих страницах. Но я хочу сделать заголовок, присутствующий на панели инструментов, динамичным. Я пытался использовать реквизит, но я, должно быть, ошибаюсь. Проверьте пример ниже:

В моем index.html:

<div id="app" v-cloak>
    <v-app>
        <spa-toolbar :title="title"></spa-toolbar>
        <router-view></router-view>
    </v-app>
</div>

<script>
    Vue.use(VueRouter);
    Vue.use(VeeValidate);
    Vue.config.devtools = true;

    const routes = [
        {
            path: '/',
            component: spaLogin,
            props: {title: 'Connexion'}
        },
        {
            path: '/parametres',
            name : 'parametres',
            component: spaParametres,
            props: {title: 'Paramètres'}
        },
    ];

    let router = new VueRouter({
        hashbang: false,
        routes
    });

    router.beforeEach((to, from, next) => {
        next();
    });


    var app = new Vue({
        el: '#app',
        watch: {},
        data: {
            title: 'Connexion',
        },
        router
    });
</script>

toolbar.vue.js (с "props: [" title "]):

 <v-toolbar-title class="white--text">{{title}}</v-toolbar-title>

И на другой странице "parametertres.vue.js" я использую props ["title"], но значение заголовка всегда "Connexion", значение, определенное в моем основном приложении в index.html.

Как я могу сделать это значение динамическим? Мысль, передав его через роутер, была бы великолепна ...

Спасибо!

Answer 1

Вы передаете свойство title от компонента v-app компоненту spa-toolbar.Затем вы устанавливаете свойство на маршрутах, которое также называется title.

Эти два никак не связаны.Также title реквизит от маршрута передается компоненту в router-view, то есть spaLogin и spaParametre.

Так что я думаю, что лучшим способом было бы определить поле meta наМаршрут:

<div id="app" v-cloak>
    <v-app>
        <spa-toolbar :title="(($route.matched[0] || {}).meta || {}).title"></spa-toolbar>
        <router-view></router-view>
    </v-app>
</div>

<script>
Vue.use(VueRouter);
Vue.use(VeeValidate);
Vue.config.devtools = true;

const routes = [
    {
        path: '/',
        component: spaLogin,
        meta: {title: 'Connexion'}
    },
    {
        path: '/parametres',
        name : 'parametres',
        component: spaParametres,
        meta: {title: 'Paramètres'}
    },
];

let router = new VueRouter({
    hashbang: false,
    routes
});

    var app = new Vue({
        el: '#app',
        data: {},
        router
    });
</script>