帮我在vue3中构建一个子页面,要求在父页面点击某个方法时,跳转到这个页面
时间: 2023-05-20 17:01:56 浏览: 60
好的,以下是在Vue3中构建子页面的代码示例:
在父组件中,你需要定义一个方法来处理点击事件,并使用Vue Router来导航到子页面:
```
<template>
<div>
<button @click="goToChildPage">跳转到子页面</button>
<router-view></router-view>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
name: 'ParentComponent',
setup() {
const router = useRouter()
const goToChildPage = () => {
router.push('/child')
}
return {
goToChildPage,
}
},
})
</script>
```
在子组件中,你可以像平常一样编写Vue组件:
```
<template>
<div>
<h1>这是子页面</h1>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ChildComponent',
})
</script>
```
最后,你需要在Vue Router中定义路由,以便能够正确地导航到子页面:
```
import { createRouter, createWebHistory } from 'vue-router'
import ParentComponent from './ParentComponent.vue'
import ChildComponent from './ChildComponent.vue'
const routes = [
{
path: '/',
component: ParentComponent,
},
{
path: '/child',
component: ChildComponent,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
```
这样,当你在父组件中点击按钮时,就会导航到子页面。