vue3 子路由

// 定义子路由的示例代码

// 1. 首先，确保你已经安装了 Vue Router 并在项目中引入它。

// 2. 创建一个 Vue Router 实例，并定义父路由和子路由。
import { createRouter, createWebHistory } from 'vue-router';
import ParentComponent from './components/ParentComponent.vue';
import ChildComponent1 from './components/ChildComponent1.vue';
import ChildComponent2 from './components/ChildComponent2.vue';

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child1', // 子路由路径
        component: ChildComponent1,
      },
      {
        path: 'child2', // 子路由路径
        component: ChildComponent2,
      },
    ],
  },
];

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

// 3. 在父组件中使用 <router-view> 来渲染子路由组件。
// ParentComponent.vue
<template>
  <div>
    <h1>这是父组件</h1>
    <router-link to="/parent/child1">前往子组件1</router-link>
    <router-link to="/parent/child2">前往子组件2</router-link>
    <router-view></router-view> <!-- 渲染子路由组件 -->
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
};
</script>

// 4. 确保在 main.js 或入口文件中挂载路由实例。
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 假设你的路由配置文件在 ./router.js 中

createApp(App).use(router).mount('#app');

解释说明：

• 父路由：/parent 是父路由，指向 ParentComponent 组件。
• 子路由：/parent/child1 和 /parent/child2 是子路由，分别指向 ChildComponent1 和 ChildComponent2 组件。
• <router-view>：在父组件中使用 <router-view> 来动态渲染匹配到的子路由组件。
• <router-link>：用于创建导航链接，点击后会切换到对应的子路由。