javascript - 传递参数Vue.js时出现路由问题

Question

这是我在这里的第一个问题，所以如果我做错了什么，我深表歉意。

我有一个我一直在开发的 crud 应用程序，由于某种原因，我无法正确路由到特定页面/组件。具体来说，我有两个路由器链接。一个在侧边栏导航中，另一个在我试图将 .id 传递给的表中。我已经尝试实施此解决方案：

https://github.com/vuejs/vue-router/issues/986

但老实说，我在某些时候让它工作，而无需进行上述链接修复。

这是我当前的代码，如果需要更多信息，请告诉我，我很乐意提供：

路由器.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Admin from "./views/Admin.vue";
import Overview from "./views/Overview.vue";
import Products from "./views/Products.vue";
import Requests from "./views/Requests.vue";
import Testing from "./views/Testing.vue";
import BulkTrash from "./views/BulkTrash.vue";
import ViewBulkRequest from "./views/ViewBulkRequest.vue";
import { fb } from "./firebase";

Vue.use(Router);

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/admin",
      name: "admin",
      component: Admin,
      meta: { requiresAuth: true },
      children: [
        {
          path: "overview",
          name: "overview",
          component: Overview
        },
        {
          path: "testing",
          name: "testing",
          component: Testing
        },
        {
          path: "bulktrash",
          name: "bulktrash",
          component: BulkTrash
        },
        {
          path: "/view/:bulk_id",
          name: "view-bulk-request",
          component: ViewBulkRequest
        },
        {
          path: "products",
          name: "products",
          component: Products
        },
        {
          path: "requests",
          name: "requests",
          component: Requests
        }
      ]
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
});

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(x => x.meta.requiresAuth);
  const currentUser = fb.auth().currentUser;

  if (requiresAuth && !currentUser) {
    next("/");
  } else if (requiresAuth && currentUser) {
    next();
  } else {
    next();
  }
});

export default router;

这是显示组件代码：

BulkTrash.vue

<template>
  <div class="bulktrash">
      <div class="container">



          <div class="container-fluid pb-3">

            <h4 class="card-title">New Bulk Trash Request</h4>
<!-- Initalize the Request From -->

            <div class="request-form">

                    <p class="ml-0 mt-5 mb-3">Pickup Information</p>

                <!-- Bulk Trash User Input Boxes -->

                <select v-model="bulk.bulk_type" class="form-control mb-2" required>
                        <option disabled value="">Type of bulk trash</option>
                        <option>Metal</option>
                        <option>E-waste</option>
                        <option>Cardboard</option>
                </select>

                <input type="text" class="form-control mb-2" placeholder="Address (location for pickup)"
                    v-model="bulk.bulk_location" required>
                <input type="text" class="form-control mb-2" placeholder="Zone (leave blank if unsure)"
                    v-model="bulk.bulk_zone">                    

                    <p class="ml-0 mt-4 mb-3">Contact information</p>

                <input type="text" class="form-control mb-2" placeholder="Name (resident name)"
                    v-model="bulk.bulk_requestor">
                <input type="text" class="form-control mb-2" placeholder="Phone"
                    v-model="bulk.bulk_phone">
                <input type="text" class="form-control mb-2" placeholder="Email"
                    v-model="bulk.bulk_email">

                    <p class="ml-0 mt-4 mb-3">Additional information</p>

                <input type="text" class="form-control mb-2" placeholder="Item description (chair, washing machine, computer, etc.)"
                    v-model="bulk.bulk_description">
                <input type="text" class="form-control mb-2" placeholder="Notes for drivers (pet's, gates, hazards, etc.)"
                    v-model="bulk.bulk_dnotes">

                <button class="btn btn-success mt-2 mb-5"
                @click="saveData">
                Save</button>
                <button class="btn btn-secondary mt-2 mb-5 ml-1"
                @click="cancelRequest">
                Cancel</button>

            </div>

<!-- Start of Request Table -->

            <div class="container h-100 pt-3"> 

              <h4>Bulk Requests</h4>


              <table class="table table-hover">
                <thead>
                  <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Type</th>
                    <th scope="col">Location</th>
                    <th scope="col">Zone</th>
                    <th scope="col">Item Desc.</th>
                    <th scope="col">Notes</th>
                    <th scope="col">Requestor</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Email</th>
                    <th scope="col">Edit</th>
                  </tr>
                </thead>

                <tbody>

                  <tr v-for="bulk in bulks" :key="bulk.id">
                    <td> {{bulk.id}} </td>
                    <td> {{bulk.type}} </td>
                    <td> {{bulk.location}} </td>
                    <td> {{bulk.zone}} </td>
                    <td> {{bulk.description}} </td>
                    <td> {{bulk.dnotes}} </td>
                    <td> {{bulk.requestor}} </td>
                    <td> {{bulk.phone}} </td>
                    <td> {{bulk.email}} </td>
                    <td> 

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

                    </td>
                    <!-- <td> {{bulk.requested}} </td> -->
                  </tr>
                </tbody>
              </table>
            </div>           
        </div>          
      </div> 
  </div>   

</template>

<script>
import {fb, db} from '../firebase'

export default {
  name: "BulkTrash",
  props: {
    msg: String
  },
  data() {
    return {
      bulks: [],
      bulk: {
        bulk_id:null,
        bulk_type:null,
        bulk_location:null,
        bulk_zone: null,
        bulk_description: null,
        bulk_dnotes: null,
        bulk_requestor: null,
        bulk_phone: null,
        bulk_email: null,
        //bulk_requested: null,
      },
        selected: '',
        selected2: ''
    }
  },
  methods: {
    readData() {

        db.collection('bulktrash').orderBy('bulk_type').get().then(querySnapshot => {
            querySnapshot.forEach(doc => {
                console.log(doc.data());
                const data = {
                    'id': doc.id,
                    'bulk_id': doc.data().bulk_id,
                    'type': doc.data().bulk_type,
                    'location': doc.data().bulk_location,
                    'zone': doc.data().bulk_zone,
                    'description': doc.data().bulk_description,
                    'dnotes': doc.data().bulk_dnotes,
                    'requestor': doc.data().bulk_requestor,
                    'phone': doc.data().bulk_phone,
                    'email': doc.data().bulk_email
                    //'requested': doc.data().bulk_requested
                }
                this.bulks.push(data)
        })
      })
    },
    cancelRequest() {
        console.log("Cancel funciton working")
    },
    saveData() {
      db.collection("bulktrash").add(this.bulk)
      .then((docRef) => {
        console.log("Document written with ID: ", docRef.id)
        Object.assign(this.$data, this.$options.data.apply(this))
        this.readData()
      })
      .catch(function(error) {
        console.error("error adding document: ", error)
      })

      },
      reset() {
        //Object.assign(this.$data, this.$options.data.apply(this))
      }
    },  
    created() {
      this.readData() 
    }

  };

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

感谢任何愿意对此一目了然的人。

标签： javascriptvue.js