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>

在另一页“ parametres.vue.js”中，我正在使用props [“ title”]，但标题的值始终为“ Connexion”，即我在主App中在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>

在VueJS中正确使用“道具”的方法

1 个答案: