Question

我正在尝试使用view-router将props传递到我的单个文件组件（.vue），但在视图扩展名中仍然出现“未定义”。

// Dashboard.vue
<template>
<div class="dashboard" :user="user" :current-team="currentTeam">
    <div class="container">
        <!-- Application Dashboard -->
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Dashboard</div>

                    <div class="card-body">
                        Your application Dashboard
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>


<script>
    export default{
        props: ['user', 'current-team'],

            mounted(){
        //
    }
}
</script>

// app.js
...
import Dashboard from './views/Dashboard.vue';
Vue.component('Dashboard', Dashboard);

const routes = [
  {path: '/dashboard', name: 'dashboard', component: Dashboard, props: true},
];

const router = new VueRouter({
  routes
})
...

未定义

如何正确传递道具？非常感谢

Answer 1

您的currentTeam和用户值来自哪里？

现在，您似乎正在尝试将用户和当前团队绑定到仪表板组件中的div元素，这将不会执行任何操作。您想以某种方式将道具从app.js传递到仪表板组件。

关于您的路线，您已经设置了道具：在您的唯一路线上为true。此设置（称为布尔模式）仅将route.params作为您的道具传递给基础组件。但是，您在/ dashboard的路径中未指定任何参数（以冒号表示的变量），因此也不会将任何参数传递给组件。

（例如，路由参数类似于路径：/ dashboard /：dashboardId。使用props：true会将参数作为称为dashboardId的prop传递给底层组件。我认为这不是您想要的。）

一种选择是按照@Squiggs的建议直接指定路线中的道具。

您的另一个选择是将模板中的仪表板组件用于app.js，然后将道具以这种方式传递给该组件。例如

//app.js
<template>
  <div>
    <dashboard :user="userVariable" :currentTeam="currentTeamVariable"></dashboard>
  </div>
</template>

这也适用于路由器视图，但是当您的其他路径不使用这些道具时会变得尴尬。

//app.js
<template>
  <div>
    <router-view :user="userVariable" :currentTeam="currentTeamVariable"></router-view>
  </div>
</template>

这取决于这些数据的来源以及您如何在应用程序中使用它们。如果需要在整个应用程序中使用的是应用程序状态数据，则值得研究Vuex。

Answer 2

看起来您实际上没有在路由定义中传递任何内容。

也许是这样？您期望什么值？

{path: '/dashboard', name: 'dashboard', component: Dashboard, props: { currentTeam: currentTeamVariable, user: 'someuser'}

如何通过vue-router和单个文件组件传递道具

2 个答案: