Vue3中怎么配置路由?

1. router.ts

//配置路由文件
import { createRouter, createWebHashHistory } from "vue-router";

let router = createRouter({
  // 路由模式
  history: createWebHashHistory(),
  routes: [
    {
      // 权限管理
      path: "/acl",
      component: () => import("@/layout/index.vue"),
      name: "Acl",
      meta: {
        title: "权限管理",
        hidden: false,
        icon: "Lock",
      },
      redirect: "/acl/user",  // 重定向路由
      // 简单写法：将params参数以propa形式传递给组件 <News :name="name" :age="age“>
      // props:true,
      // 函数写法：可指定将query参数以propa形式传递给组件
      props: (route: any) => {
        return route.query
      },
      // 对象写法：将数据写死
      // props:{
      //    name:"张三",
      //    age:18
      // }
      children: [
        {
          path: "/acl/user",
          component: () => import("@/views/acl/user/index.vue"),
          name: "User",
          meta: {
            title: "用户管理",
            hidden: false,
            icon: "User"
          }
        }
      ]
    }, {
      // 任意路由
      path: "/:pathMatch(.*)*",
      component: () => import("@/views/404/index.vue"),
      name: "any",
    }
  ],
  //滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    };
  },
});
export default router;

2.main.ts

import { createApp } from 'vue'  
import App from './App.vue'
//导入路由文件
import router from "@/router";

const app = createApp(App)
// 注册路由
app.use(router)
app.mount('#app')

3. App.vue

<template>
   // 指定路由出口的位置
  <RouterView></RouterView>  
</template>