Javascript 如何使用vue路由器和单文件组件传递道具

我试图使用view router将道具传递给我的单个文件组件（.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
})
...

//Dashboard.vue
仪表板
您的应用程序仪表板
导出默认值{
道具：['user'，'current team']，
安装的（）{
//
}
}
//app.js
...
从“/views/Dashboard.vue”导入仪表板；
Vue.组件（“仪表板”，仪表板）；
常数路由=[
{路径：'/dashboard'，名称：'dashboard'，组件：dashboard，道具：true}，
];
常量路由器=新的VueRouter({
路线
})
...

未定义

---

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

看起来您实际上没有通过任何有关路线定义的内容

也许是这样的？你期望的价值是什么

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

---

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

也许是这样的？你期望的价值是什么

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

---

您对currentTeam和user的价值观来自哪里

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

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

（例如，Route参数类似于path:/dashboard/：dashboardId。使用props:true，这将把参数作为名为dashboardId的道具传递给基础组件。我认为这不是您想要的。）

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

您的另一个选择是使用app.js模板中的dashboard组件，并以这种方式将道具传递给该组件。e、 g

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

//app.js

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

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

//app.js

---

这取决于这些数据来自何处，以及您希望如何在应用程序中使用它们。如果需要在整个应用程序中使用的是应用程序状态数据，则可能值得查看Vuex。

您对currentTeam和user的值来自何处

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

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

（例如，Route参数类似于path:/dashboard/：dashboardId。使用props:true，这将把参数作为名为dashboardId的道具传递给基础组件。我认为这不是您想要的。）

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

您的另一个选择是使用app.js模板中的dashboard组件，并以这种方式将道具传递给该组件。e、 g

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

//app.js

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

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

//app.js

这取决于这些数据来自何处，以及您希望如何在应用程序中使用它们。如果需要在整个应用程序中使用应用程序状态数据，那么Vuex可能值得一看