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']