vue3页面跳转到子路由页面

在Vue 3中，你可以使用Vue Router来进行页面跳转，包括跳转到子路由页面。以下是一种常见的实现方式：

首先，确保你已经安装了Vue Router，并将其配置到你的Vue应用中。

接下来，在你的路由配置文件（通常是`router/index.js`）中，定义你的路由和子路由：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/parent',
    name: 'Parent',
    component: Parent,
    children: [
      {
        path: 'child',
        name: 'Child',
        component: Child
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在上面的例子中，我们定义了一个父级路由`/parent`，并在它下面定义了一个子路由`/parent/child`。

在你的父级组件中（例如`Parent.vue`），你可以使用`<router-link>`标签来创建一个链接到子路由的导航链接：

<template>
  <div>
    <h1>Parent Component</h1>
    <router-link :to="{ name: 'Child' }">Go to Child</router-link>
    <router-view></router-view>
  </div>
</template>

上述代码中，我们使用`<router-link>`将文本"Go to Child"包裹起来，并设置了`to`属性为`{ name: 'Child' }`，这将链接到我们在路由中定义的子路由。

最后，在你的子组件中（例如`Child.vue`），你可以按照需要进行渲染：

<template>
  <div>
    <h2>Child Component</h2>
    <!-- 子组件内容 -->
  </div>
</template>

这样，当用户点击父组件中的导航链接时，Vue Router将会自动加载并渲染子组件。

请确保你根据自己的项目结构和需求进行适当的调整。希望这个示例能帮到你！