<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <GoodsList @click="onClick"/> <GoodsDetail01 /> <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>怎么改成展示主页Goodslist,点击主页列表图片实现跳转到其他页面,不能用路由实现
时间: 2023-06-19 18:05:13 浏览: 47
可以在 `GoodsList` 组件中添加一个 `click` 事件,并且通过调用 `App` 组件的 `onClick` 方法来改变 `active` 属性的值,从而实现页面的跳转。
首先,在 `GoodsList` 组件中添加一个 `click` 事件:
```html
<template>
<div>
<img src="图片路径" @click="handleClick">
<!-- 其他商品列表 -->
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('click', 'GoodsDetail01') // 点击后跳转到 GoodsDetail01 页面
}
}
}
</script>
```
然后,在 `App` 组件中监听 `GoodsList` 组件的 `click` 事件,并且通过调用 `onClick` 方法来改变 `active` 属性的值:
```html
<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>
```
这样,点击 `GoodsList` 组件中的图片就可以实现页面的跳转了。