vue3 二级项目路由跳转

在Vue3中实现二级项目路由跳转通常涉及到Vue Router的配置。Vue Router是Vue.js官方的路由管理器，它和Vue.js的深度集成使得构建单页面应用变得非常容易。在二级路由的场景中，你需要在父组件中定义路由出口，并在路由配置中使用嵌套路由的概念。以下是基本步骤和示例代码：

1. 安装Vue Router：如果你还没有安装Vue Router，可以使用npm或yarn进行安装。

npm install vue-router@4

或者

yarn add vue-router@4

2. 配置路由文件：在你的项目中创建一个路由配置文件，通常命名为`router/index.js`。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import ParentComponent from '@/components/ParentComponent.vue'; // 父组件路径
import ChildComponent from '@/components/ChildComponent.vue'; // 子组件路径

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
      },
    ],
  },
];

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

export default router;

3. 使用`<router-view>`作为路由出口：在父组件中定义一个`<router-view>`标签，这个标签将作为子组件渲染的出口。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>这是父组件</h1>
    <router-view></router-view> <!-- 子组件将会被渲染在这里 -->
  </div>
</template>

4. 导入并使用路由：在你的Vue应用入口文件（通常是`main.js`或`main.ts`）中导入并使用路由。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入配置好的路由

const app = createApp(App);

app.use(router);

app.mount('#app');

5. 跳转到子路由：在父组件中，你可以使用`<router-link>`或者编程式导航来跳转到子路由。

<!-- 在父组件的模板中 -->
<router-link to="/parent/child">跳转到子组件</router-link>

或者

// 在父组件的methods中
this.$router.push('/parent/child');

这样配置后，当用户访问`/parent/child`路径时，将会渲染出`ChildComponent`组件。