vue3根据路由加载子组件

在Vue3中，可以使用Vue Router来实现根据路由加载子组件。具体步骤如下：

1. 安装Vue Router

使用npm或yarn安装Vue Router

npm install vue-router

2. 创建Vue Router实例

在main.js文件中创建Vue Router实例，并将其挂载到Vue实例中。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

3. 创建路由配置

在router.js中创建路由配置，指定每个路由对应的组件。

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

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

export default router

4. 在组件中使用路由

在需要加载子组件的父组件中，使用Vue Router提供的router-view组件来显示子组件。

<template>
  <div>
    <h1>My App</h1>
    <router-view></router-view>
  </div>
</template>

5. 导航到其他路由

在需要导航到其他路由的组件中，使用Vue Router提供的router-link组件来生成链接。例如：

<template>
  <div>
    <h2>About</h2>
    <p>This is the about page.</p>
    <router-link to="/">Go back to home page</router-link>
  </div>
</template>

当用户点击“Go back to home page”链接时，将会导航到根路由对应的组件（即Home组件）。