Что-то не так с моей маршрутизацией vue.js

Question

У меня проблемы с отображением CutomerHome, а также со страницы просмотра и редактирования клиента. Заранее спасибо!

Navabar.vue

 <template>
  <nav>
      <div class="nav-wrapper green">
        <div class="container">
              <router-link to="/" class="brand-logo">Dorsett Vapor</router-link>   
        </div>
        <div class="container">
          <ul class="right">
            <li>
               <router-link to="/customerhome">Customers</router-link>
               <router-link to="/">Orders</router-link>
            </li>
          </ul> 
        </div>
      </div>
    </nav>
  </template>

CustomerHome.vue

<template>
  <div id="customer-home">
    <ul class="collection with-header">
      <li class="collection-header"><h4>Customer</h4></li>
      <li v-for="order in orders" v-bind:key="order.id" class="collection-item">
        <div>{{order.customer}}</div>
         <router-link class="secondary-content" v-bind:to="{ name: 'view-customer',
         params: { customer: order.customer }}"><i class="fa fa-plus"></i></router-link>
      </li>
    </ul>
    <div class="fixed-action-btn">
      <router-link to="/new/:customer" class="btn-floating btn-large blue">
        <i class="fa fa-plus"></i>
      </router-link>
    </div>
  </div>
</template>

<script>
  import db from './firebaseInit'
  export default {
    name: 'customer-home',
    data () {
      return {
        orders: [],
        loading: true
      }
    },
    created () {
      db.collection('orders').get().then((querySnapshot) => {
        this.loading = false
        querySnapshot.forEach((doc) => {
          const data = {
            'id': doc.id,
            'customer': doc.data().customer,
            'email': doc.data().email,
            'phone': doc.data().phone
          }
          this.orders.push(data)
        })
      })
    }
  }
</script>

NewCustomer.vue

  <div id="new-customer">
    <h3>New Customer</h3>
    <div class="row">
    <form @submit.prevent="saveCustomer" class="col s12">
      <div class="row">
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="customer" required>
          <label>Customer</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="email" required>
          <label>Email</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="phone" required>
          <label>Phone number</label>
        </div>
      </div>
      <button type="submit" class="btn">Submit</button>
      <router-link to="/new-customer" class="btn grey">Cancel</router-link>
    </form>
  </div>
  </div>
</template>

<script>
    import db from './firebaseInit'
    export default {
      customer: 'new-customer',
      data () {
        return {
          customer: null,
          email: null,
          phone: null
        }
      },
      methods: {
        saveCustomer () {
          db.collection('orders').add({
            customer: this.customer,
            email: this.email,
            phone: this.phone
          })
          .then(docRef => {
            console.log('Client added: ', docRef.id)
            this.$router.push('/customerhome')
          })
          .catch(error => {
            console.error('Error adding Order: ', error)
          })
        }
      }
    }
</script>

ViewCustomer.vue

<template>
  <div id="view-customer">
    <ul class="collection with-header">
      <li class="collection-header"><h4>{{customer}}</h4></li>
      <li class="collection-item">Phone Number: {{phone}}</li>
      <li class="collection-item">E-mail: {{email}}</li>
    </ul>
    <router-link to="/customerhome" class="btn grey">Back</router-link>
    <button @click="deleteCustomer" class="btn red">Delete</button>

    <div class="fixed-action-btn">
      <router-link v-bind:to="{ name: 'edit-customer', 
       params: { customer: customer }}" class="btn-floating btn-large blue">
        <i class="fa fa-pencil"></i>
      </router-link>
    </div>
  </div>
</template>

<script>
  import db from './firebaseInit'
  export default {
    product: 'view-customer',
    data () {
      return {
        customer: null,
        phone: null,
        email: null
      }
    },
    beforeRouteEnter (to, from, next) {
      db.collection('orders').where('customer', '==', to.params.customer).get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          next(vm => {
            vm.customer = doc.data().customer
            vm.phone = doc.data().phone
            vm.email = doc.data().email
          })
        })
      })
    },
    watch: {
      '$route': 'fetchData'
    },
    methods: {
      fetchData () {
        db.collection('orders').where('customer', '==', this.$route.params.customer).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            this.customer = doc.data().customer
            this.phone = doc.data().phone
            this.email = doc.data().email
          })
        })
      },
      deleteOrder () {
        if(confirm ('Are you sure?')) {
          db.collection('orders').where('customer', '==', this.$route.params.customer).get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
              doc.ref.delete();
              this.$router.push('/customerhome')
            })
          })
        }
      }
    }
  }
</script>

EditCustomer.vue

<template>
  <div id="new-customer">
    <h3>Edit Customer</h3>
    <div class="row">
    <form @submit.prevent="updateCustomer" class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="customer" required>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="email" required>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="phone" required>
        </div>
      </div>
      <button type="submit" class="btn">Submit</button>
      <router-link to="/customerhome" class="btn grey">Cancel</router-link>
    </form>
  </div>
  </div>
</template>

<script>
  import db from './firebaseInit'
  export default {
    name: 'edit-customer',
    data () {
      return {
        customer: null,
        email: null,
        phone: null
      }
    },
    beforeRouteEnter (to, from, next) {
      db.collection('orders').where('customer', '==', to.params.customer).get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          next(vm => {
            vm.customer = doc.data().customer
            vm.email = doc.data().email
            vm.phone = doc.data().phone
          })
        })
      })
    },
    watch: {
      '$route': 'fetchData'
    },
    methods: {
      fetchData () {
        db.collection('orders').where('customer', '==', this.$route.params.customer).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            this.customer = doc.data().customer
            this.email = doc.data().email
            this.phone = doc.data().phone
          })
        })
      },
      updateOrder () {
        db.collection('orders').where('customer', '==', this.$route.params.customer).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            doc.ref.update({
              customer: this.customer,
              email: this.email,
              phone: this.phone
            })
            .then(() => {
              this.$router.push({ name: 'view-customer', params: { customer: this.customer }})
            });
          })
        })
      }
    }
  }
</script>

Index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import ViewOrder from '@/components/ViewOrder'
import NewOrder from '@/components/NewOrder'
import EditOrder from '@/components/EditOrder'
import NewCustomer from '@/components/NewCustomer'
import ViewCustomer from '@/components/ViewCustomer'
import EditCustomer from '@/components/EditCustomer'
import CustomerHome from '@/components/CustomerHome'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/new',
      name: 'new-order',
      component: NewOrder
    },
    {
      path: '/:product',
      name: 'view-order',
      component: ViewOrder
    },
    {
      path: '/edit/:product',
      name: 'edit-order',
      component: EditOrder
    },
    {
      path: '/customerhome',
      name: 'customer-home',
      component: CustomerHome
    },
    {
      path: '/new/:customer',
      name: 'new-customer',
      component: NewCustomer
    },
    {
      path: '/:customer',
      name: 'view-customer',
      component: ViewCustomer
    },
    {
      path: '/edit/:customer',
      name: 'edit-customer',
      component: EditCustomer
    }
  ]
})

EditOrders.vue

<template>
  <div id="new-order">
    <h3>Edit Order</h3>
    <div class="row">
    <form @submit.prevent="updateOrder" class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="product" required>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="customer" required>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="email" required>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="phone" required>
        </div>
      </div>
      <button type="submit" class="btn">Submit</button>
      <router-link to="/" class="btn grey">Cancel</router-link>
    </form>
  </div>
  </div>
</template>

<script>
  import db from './firebaseInit'
  export default {
    name: 'edit-order',
    data () {
      return {
        product: null,
        customer: null,
        email: null,
        phone: null
      }
    },
    beforeRouteEnter (to, from, next) {
      db.collection('orders').where('product', '==', to.params.product).get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          next(vm => {
            vm.product = doc.data().product
            vm.customer = doc.data().customer
            vm.email = doc.data().email
            vm.phone = doc.data().phone
          })
        })
      })
    },
    watch: {
      '$route': 'fetchData'
    },
    methods: {
      fetchData () {
        db.collection('orders').where('product', '==', this.$route.params.product).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            this.product = doc.data().product
            this.customer = doc.data().customer
            this.email = doc.data().email
            this.phone = doc.data().phone
          })
        })
      },
      updateOrder () {
        db.collection('orders').where('product', '==', this.$route.params.product).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            doc.ref.update({
              product: this.product,
              customer: this.customer,
              email: this.email,
              phone: this.phone
            })
            .then(() => {
              this.$router.push({ name: 'view-order', params: { product: this.product }})
            });
          })
        })
      }
    }
  }
</script>

NewOrders.vue

<template>
  <div id="new-order">
    <h3>New Order</h3>
    <div class="row">
    <form @submit.prevent="saveOrder" class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="product" required>
          <label>Product</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="customer" required>
          <label>Customer</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="email" required>
          <label>Email</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input type="text" v-model="phone" required>
          <label>Phone number</label>
        </div>
      </div>
      <button type="submit" class="btn">Submit</button>
      <router-link to="/" class="btn grey">Cancel</router-link>
    </form>
  </div>
  </div>
</template>

<script>
    import db from './firebaseInit'
    export default {
      customer: 'new-order',
      data () {
        return {
          product: null,
          customer: null,
          email: null,
          phone: null
        }
      },
      methods: {
        saveOrder () {
          db.collection('orders').add({
            product: this.product,
            customer: this.customer,
            email: this.email,
            phone: this.phone
          })
          .then(docRef => {
            console.log('Client added: ', docRef.id)
            this.$router.push('/')
          })
          .catch(error => {
            console.error('Error adding Order: ', error)
          })
        }
      }
    }
</script>

ViewOrders.vue

<template>
  <div id="view-order">
    <ul class="collection with-header">
      <li class="collection-header"><h4>{{product}}</h4></li>
      <li class="collection-item">Customer: {{customer}}</li>
      <li class="collection-item">Phone Number: {{phone}}</li>
      <li class="collection-item">E-mail: {{email}}</li>
    </ul>
    <router-link to="/" class="btn grey">Back</router-link>
    <button @click="deleteOrder" class="btn red">Delete</button>

    <div class="fixed-action-btn">
      <router-link v-bind:to="{ name: 'edit-order', 
       params: { product: product }}" class="btn-floating btn-large blue">
        <i class="fa fa-pencil"></i>
      </router-link>
    </div>
  </div>
</template>

<script>
  import db from './firebaseInit'
  export default {
    product: 'view-order',
    data () {
      return {
        product: null,
        customer: null,
        phone: null,
        email: null
      }
    },
    beforeRouteEnter (to, from, next) {
      db.collection('orders').where('product', '==', to.params.product).get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          next(vm => {
            vm.product = doc.data().product
            vm.customer = doc.data().customer
            vm.phone = doc.data().phone
            vm.email = doc.data().email
          })
        })
      })
    },
    watch: {
      '$route': 'fetchData'
    },
    methods: {
      fetchData () {
        db.collection('orders').where('product', '==', this.$route.params.product).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            this.product = doc.data().product
            this.customer = doc.data().customer
            this.phone = doc.data().phone
            this.email = doc.data().email
          })
        })
      },
      deleteOrder () {
        if(confirm ('Are you sure?')) {
          db.collection('orders').where('product', '==', this.$route.params.product).get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
              doc.ref.delete();
              this.$router.push('/')
            })
          })
        }
      }
    }
  }
</script>

Home.vue

<template>
  <div id="home">
    <ul class="collection with-header">
      <li class="collection-header"><h4>Orders</h4></li>
      <li v-for="order in orders" v-bind:key="order.id" class="collection-item">
        <div>{{order.product}}</div>
         <router-link class="secondary-content" v-bind:to="{ name: 'view-order',
         params: { product: order.product }}"><i class="fa fa-plus"></i></router-link>
      </li>
    </ul>
    <div class="fixed-action-btn">
      <router-link to="/new" class="btn-floating btn-large blue">
        <i class="fa fa-plus"></i>
      </router-link>
    </div>
  </div>
</template>

<script>
  import db from './firebaseInit'
  export default {
    name: 'home',
    data () {
      return {
        orders: [],
        loading: true
      }
    },
    created () {
      db.collection('orders').get().then((querySnapshot) => {
        this.loading = false
        querySnapshot.forEach((doc) => {
          const data = {
            'id': doc.id,
            'customer': doc.data().customer,
            'email': doc.data().email,
            'phone': doc.data().phone,
            'product': doc.data().product
          }
          this.orders.push(data)
        })
      })
    }
  }
</script>

У меня все страницы заказов работают так, поэтому я не включил их в сообщение,Он может отображать страницу CustomerHome. С панели навигации, а также он не может перейти непосредственно к клиентскому дому, введя его в URL. У меня работает база данных, я использую FireBase, и все работает правильно.