vue3中使用路由及子路由配置

npm install vue-router@4

新增router文件夹，router下新建index.js,附上下属代码:

如A页面下有组件B，B组件中也需要有路由跳转，则直接在B组件中放入 <router-view></router-view>，然后在一级路由下添加children项路由即可，注：children中默认项path需写为空

原文地址：嵌套路由 | Vue Router

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"

// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import homePage from "../components/HomePage/HomePage.vue";
import admin from "../components/mainlayout/mainlayout.vue";
import Project from "../components/Project/Project.vue";
import home from '../components/Home/home.vue';


// 2. 定义路由配置
const routes = [
  { 
    path: "/",
    redirect: '/home'
  },
  { path: "/home", component: home,
   children: [
	     { path: "", component: homePage },
  	     { path: "/homePage", component: homePage },
      
         { path: "/Project", component: Project },
      ], 
  },
  { path: "/homePage", component: homePage },
  { path: "/admin", component: admin },
];

// 3. 创建路由实例
const router = createRouter({
  // 4. 采用hash 模式
  history: createWebHashHistory(),
  // 采用 history 模式
  // history: createWebHistory(),
  routes, //使用上方定义的路由配置
});

export default router 

在main.js中引入./router/index.js

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import * as Icons from "@ant-design/icons-vue";
import VueResouce from 'vue-resource';
import RouterIndex from './router/index';



const app = createApp(App).use(Antd);

app.use(RouterIndex);


app.mount("#app");

// app.use(VueResouce);



// const icons : any = Icons
// for (const i in icons) {
//   app.component(i, icons[i])
// }