Vue.js Использование компонента внутри другого на странице через маршруты

Question

Совершенно новый для Vue.js, и я свободно следую курсу на Vuex, где я делаю корзину для покупок и список продуктов, я продолжаю это из другого учебника, который я наблюдал, поэтому у меня есть несколько компонентов в моем проекте.Я хочу вставить свой компонент корзины покупок в компонент списка товаров вместо того, чтобы размещать их на двух разных страницах.Я перепутался с маршрутами, и я перепутался с компонентом списка продуктов, но я не могу заставить его работать, я либо получаю пустую страницу (только со ссылками, видимыми из app.vue) и без ошибок или страницы ошибок.

ShoppingCart.vue

<template>
    <div>
        <h1>Shopping Cart</h1>
        <ul>
            <li v-for="product in products">
                {{product.title}} - {{product.price}} - {{product.quantity}}
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        name: 'ShoppingCart'
    }
</script>

<style scoped>

</style>

ProductList.vue

<template>
    <div>
        <h1>Product List</h1>
        <img v-if="loading" src="https://i.imgur.com/JfPpwOA.gif" />
        <ul v-else>
            <li v-for="product in products">
                {{product.title}} - {{product.price}} - {{product.inventory}}
                <button @click="addProductToCart(product)">Add to cart</button>
            </li>
        </ul>
    </div>
</template>

<script>
    import ShoppingCart from '@/components/ShoppingCart'
    export default {
        name: 'ProductList',
        components: {
            ShoppingCart
        },
        data () {
            return {
                loading: false
            }
        },
        computed: {
            products () {
                return this.$store.getters.availableProducts
            }
        },
        methods: {
            addProductToCart (product) {
                this.$store.dispatch('addProductToCart', product)
            }
        },
        created () {
            this.loading = true
            this.$store.dispatch('fetchProducts')
                .then(() => this.loading = false)
        }
    }
</script>

<style scoped>
    ul {
        list-style-type: none;
    }
</style>

App.vue

<template>
  <div id="app">
    <ul>
      <li class="nav"><router-link to="/" class="hdrNav">Users</router-link></li>
      <li class="nav"><router-link to="/test" class="hdrNav">Test</router-link></li>
      <li class="nav"><router-link to="/ProductList" class="hdrNav">Store</router-link></li>
    </ul>
    <hr />
    <router-view/>
    <!--
    <Test msg="Hello"></Test>
    <Users></Users>
    -->
  </div>
</template>

<script>
import Test from '@/components/test'
import Users from '@/components/users'
import ProductList from '@/components/ProductList'

export default {
  name: 'App',
  components: {
    Test,
    Users,
    ProductList
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
li.nav {
  font-size: 30px;
  padding-right: 15px;
  padding-left: 15px;
  list-style-type:  none;
  display: inline-block;

}
.hdrNav {
  text-decoration: none;
}
.hdrNav:hover {
  color: orangered;
}
hr {
  margin-bottom: 25px;
}
</style>

index.js (маршрут)

import Vue from 'vue'
import Router from 'vue-router'
import Test from '@/components/test.vue'
import Users from '@/components/users.vue'
import ProductList from '@/components/ProductList.vue'
import ShoppingCart from '@/components/ShoppingCart.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Users',
      component: Users
    },
    {
      path: '/Test',
      name: 'Test',
      component: Test
    },
    {
      path: '/ProductList',
      name: 'Product List',
      components: {ProductList, ShoppingCart}
    }
  ]
})

Answer 1

Размещение - это все ... В моем файле с именем ProductList.vue я продолжал импортировать компонент и затем пытался добавить <ShoppingCart /> сразу после </div> и до тегов </template>, когда я получалошибка, я решил попробовать переместить тег <ShoppingCart /> прямо внутрь </div>, и он начал работать ...

ProductList.vue

<template>
    <div>
        <h1>Product List</h1>
        <img v-if="loading" src="https://i.imgur.com/JfPpwOA.gif" />
        <ul v-else>
            <li v-for="product in products">
                {{product.title}} - {{product.price}} - {{product.inventory}}
                <button @click="addProductToCart(product)">Add to cart</button>
            </li>
        </ul>
        <ShoppingCart />
    </div>
</template>

<script>
    import ShoppingCart from '@/components/ShoppingCart'
    export default {
        name: 'ProductList',
        components: {
            ShoppingCart
        },
        data () {
            return {
                loading: false
            }
        },
        computed: {
            products () {
                return this.$store.getters.availableProducts
            }
        },
        methods: {
            addProductToCart (product) {
                this.$store.dispatch('addProductToCart', product)
            }
        },
        created () {
            this.loading = true
            this.$store.dispatch('fetchProducts')
                .then(() => this.loading = false)
        }
    }
</script>

<style scoped>
    ul {
        list-style-type: none;
    }
</style>