jeecg-vue3初学路由的实现与跳转

1.路由配置分为：菜单配置或静态配置

菜单配置：找到配置页面进行配置

静态配置：路径：src/router/routes/modules/文件名.ts 

import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';

export const test: AppRouteModule = {
  path: '/demo',
  name: 'Demo',
  component: LAYOUT,
  // redirect: '/charts/echarts/map',
  meta: {
    orderNo: 1,
    icon: 'ant-design:unordered-list-outlined',
    title: '在线申报',
  },
  children: [
    {
      path: 'demo2',
      name: 'Demo2',
      meta: {
        title: 'demo2',
      },
      component: () => import('/@/views/demo/demo2/index.vue'),
    },
    {
      path: '/demo/demo3',
      name: 'Demo3',
      component: () => import('/@/views/demo/demo3/index.vue'),
      meta: {
        title: '在线填报',
        hideMenu: true, //菜单隐藏
        currentActiveMenu: "/demo/demo3/index.vue", //菜单颜色选中配置
      },
    },
  ],
};

export default test;

2.路由引用

方式一：import { useRouter } from 'vue-router';
方式二：import { useGo } from '/@/hooks/web/usePage';

3.路由跳转

方式一：let router = useRouter(); 

router.push({
  name: '路由名称',
  query: {
    id: data.id,
  }
});

或router.push({ path: '路由指定路径', query: { id: data.id, } });

或router.push({ name: '路由名称', param: { id: data.id, } });

方式二：const go = useGo();

直接跳转不携带参数：go(`路由指定路径`);

4.路由接收

导入：import { useRoute} from 'vue-router';

方式一：let id = route.query.id; 
方式二(param传递时接收方式，未测试过)：props:['id']