Question

我正试图通过一个教程（下面的链接）来学习vue和firebase。有一个主要的仪表板页面，其中包含员工列表（“仪表板”），而我已经知道该页面可以显示来自Firebase的员工列表。每个员工都有以下路由器链接，可转到员工页面以查看详细信息：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<li v-for="employee in employees" v-bind:key="employee.id" class="collection-item">
        <div class="chip">{{employee.dept}}</div>
        {{employee.employee_id}}:{{employee.name}}
        <router-link class="secondary-content"
          v-bind:to="{name: 'view-employee', params: {employee_id: employee.employee_id}}"
        >
        <i class="fa fa-eye"></i>
        </router-link>
      </li>

加载仪表板组件时，或者单击页面上员工旁边的链接时，什么也没有发生，并且出现以下警告：

[vue-router]缺少命名路由“ view-employee”的参数：预期要定义的“员工”

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/new',
      name: 'new-employee',
      component: NewEmployee
    },
    {
      path: '/edit/:employee-id',
      name: 'edit-employee',
      component: EditEmployee
    },
    {
      path: '/:employee-id',
      name: 'view-employee',
      component: ViewEmployee
    }
  ]
})

但是视图员工或编辑员工路径均未按预期工作。例如，我需要输入URL“ localhost：8081 /＃/ edit /：employee-id”，只是为了看到一个空白的Edit Employee页面。我需要输入localhost：8081 /＃/：employee-id才能看到空白的“查看员工”页面。现在，我已将获取代码添加到View Employee，转到localhost：8081 /＃/：employee-id会给我这个错误：

Function Query.where（）需要一个有效的第三个参数，但是未定义。

但这是因为它可以识别“ to.params.employee_id”，因为我不是从员工列表中到达的。

这是教程中视频的相关部分：

https://youtu.be/rUz4oz7dTno?list=PLillGF-RfqbYsOOycB67Raf9dwmL6Y31M&t=638

Answer 1

原因可能是连字符和下划线字符不同（employee-id与employee_id不同）

您可以尝试更改路线：

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/new',
      name: 'new-employee',
      component: NewEmployee
    },
    {
      path: '/edit/:employee_id',
      name: 'edit-employee',
      component: EditEmployee
    },
    {
      path: '/:employee_id',
      name: 'view-employee',
      component: ViewEmployee
    }
  ]
})

或更改路由器链接

<router-link class="secondary-content"
  v-bind:to="{name: 'view-employee', params: {'employee-id': employee.employee_id}}">
  <i class="fa fa-eye"></i>
</router-link>

Vue路由问题

1 个答案: