<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <GoodsList @click="onClick"/> <GoodsDetail01 v-show= "active === 'GoodsDetail01'" /> <GoodsDetail02 v-show= "active === 'GoodsDetail02'" /> </div> </template> <script> import GoodsList from './components/goodsList.vue'; import GoodsDetail01 from './components/goodsDetail01.vue'; import GoodsDetail02 from './components/goodsDetail02.vue'; // import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', data(){ return{ active: 'GoodsList' }; }, methods:{ onClick(name){ this.name = name; } }, components: { // HelloWorld, GoodsList, GoodsDetail01, GoodsDetail02 } } </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: 60px; } </style>这是vue.app，如何实现点击跳转

你可以在 `GoodsList` 组件中定义一个 `click` 事件，并通过 `$emit` 方法将要跳转的组件名称传递给父组件 `App`。然后在 `App` 组件中定义一个 `onClick` 方法，用于接收子组件传递过来的组件名称，并将其赋值给 `active` 属性，用于控制显示哪个组件。具体实现可以参考下面的代码：

<template>
  <div>
    <div class="goods" v-for="item in goodsList" :key="item.id" @click="goToDetail(item)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsList',
  data() {
    return {
      goodsList: [
        { id: 1, name: '商品1' },
        { id: 2, name: '商品2' },
        { id: 3, name: '商品3' },
      ],
    };
  },
  methods: {
    goToDetail(item) {
      this.$emit('click', item.id === 1 ? 'GoodsDetail01' : 'GoodsDetail02');
    }
  }
};
</script>

<template>
  <div id="app">
    <GoodsList @click="onClick"/>
    <GoodsDetail01 v-show="active === 'GoodsDetail01'" />
    <GoodsDetail02 v-show="active === 'GoodsDetail02'" />
  </div>
</template>

<script>
import GoodsList from './components/GoodsList.vue';
import GoodsDetail01 from './components/GoodsDetail01.vue';
import GoodsDetail02 from './components/GoodsDetail02.vue';

export default {
  name: 'App',
  data() {
    return {
      active: 'GoodsList',
    };
  },
  methods: {
    onClick(name) {
      this.active = name;
    },
  },
  components: {
    GoodsList,
    GoodsDetail01,
    GoodsDetail02,
  },
};
</script>