如何通過vue-router和單個文件組件傳遞道具

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的路徑中指定任何參數（以冒號表示的變量），因此也不會將任何參數傳遞給組件。

（例如，Route參數類似於路徑：/ 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'}