vue3+ts动态在router页面获取左侧路由的动态数据

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import About from '../views/About.vue';
import { getRouter } from '../http/api';接口

// meta代表是否在左侧渲染出来
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'About',
    component:About,
    redirect: 'order',重定向将order作为根目录

  }, {
    path: '/login',
    component: () => import('../views/login/login.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes,
});

// 路由拦截---左侧菜单栏的路由在router里面不显示
router.beforeEach(async (to) => {
  // 如果没有登录只能去登陆页面
  const token:string | null = localStorage.getItem("token");
  if (!token && to.path != '/login') {
    return "/login"
    // 已登录状态，token存在
  } else if (to.path != '/login' && token) {
    if (router.getRoutes().length === 2) {这个地方为几根据有几个固定的路由来算
      //动态添加路由
      let routerData: any = await getRouter();后台返的路由接口
      console.log(routerData,'iiii')
      routerData = routerData.data;
      routerData.forEach((v: any) => {
        const routerObj: RouteRecordRaw = {
          path: v.name,
          name: v.name,
          meta: v.meta,
          component: () => import(`../views/${v.path}.vue`)
        };
        router.addRoute("About", routerObj)
      });
      router.replace(to.path);
    }
  } else if (to.path == '/login' && token) {
    return '/'
  }
})


export default router;

一进入页面就给order这个列表选中的颜色

<el-aside width="200px">
          <!-- 3.开启理由模式，router -->
          <el-menu
          router
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="active" 这个地方就是return出来的
            text-color="#fff"
          >



import {useRouter,useRoute} from 'vue-router';
export default defineComponent({
  setup() {
    const router =useRouter();
    const route=useRoute();根据这里面到找到选中的路由
    const list =router.getRoutes().filter(v=>v.meta.isShow);//拿到所有的路由实例,用filter过滤路由元信息为true的路由
    return {
      list,
      active:route.path返回选中的路由
    };