Vuejs：在您所在的页面上显示所选项目

Question

我需要一些帮助，以在您所在的页面上显示选定的项目。我有三个组成部分：首页，产品和索引。索引组件是全局组件，它具有一个项目列表，并带有附加到其的路由链接，以到达产品页面（组件）并显示被单击的项目。我在路由链接中将商品作为参数传递，以便能够访问“产品”页面上的商品。我正在使用Home组件上的Index Component显示所有项目。当我从首页的索引组件中单击一个项目时，它会转到产品页面并显示该项目。该部分工作正常，但是当我在“产品”页面上并且单击“索引”组件中的项目时，它没有在“产品”页面上显示单击的项目。我真的需要一些帮助来解决这个问题。

Main.js代码

import Vue from 'vue'
import App from './App'
import router from './router/routes'
import Index from './components/Index'

Vue.component('list-items', Index)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})

Route.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../pages/Home'
import Product from '../pages/Product'

Vue.use(Router)

export default new Router({
  routes: [
 {
  path: '' || '/',
  name: 'Home',
  component: Home
},
{
  path: '/product',
  name: 'Product',
  component: Product,
  props: true
   }
 ],
mode: 'history'
})

Home.vue组件

<template>
<div class="container-fluid p-0">
<list-items />
</div>
</template>

<script>

export default {
name: 'Home',
data: () => ({

  })
}

Product.vue组件

<template>
<div class="container-fluid p-0">
  <div class="container-fluid py-5">
    <div class="row">
      <div class="col-md-7">
        <div class="col-md-12">
          <img v-bind:src="item.url" alt="" class="img-fluid">
        </div>
      </div>
      <div class="col-md-4 margin-padding-right">
        <div class="col-md-12">
          <h3>{{$route.params.product.name}}</h3>
          <h5 class="price">${{item.price}}</h5>
        </div>
      </div>
    </div>

    <br>
    <div class="container-fluid">
      <div class="col-md-12 related-item">
        <h5>Related Items</h5>
      </div>

      <list-items />

    </div>

  </div>
</div>

<script>

export default {
   name: 'Product',

   props: ['product'],

  data: () => ({
    quantity: 1,
    item: {
      name: '',
      url: ''
    }
}),
mounted () {
  if (this.product) {
  this.item.name = this.product.name
  this.item.url = this.product.image
  }
},
watch: {
    change: function (newValue, oldValue) {
     this.item.name = newValue.product.name
      }
   }
 }
</script>

<style lang="scss" scoped>

</style>

这是我要实现的目标的图像。