项目路由配置存放于src/router/routes (opens new window)下面。 src/router/routes/modules (opens new window)用于存放路由模块,在该文件下内的文件会自动注册
routes下modules新建 project,把routes下modules下demo的comp.ts内容复制过来留下table部分进行修改,
官方文档中关于新增路由示例:https://vvbin.cn/doc-next/guide/basic/route.html#meta-%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
const test: AppRouteModule = {
path: '/test',
name: 'TestDemo',
component: LAYOUT,
redirect: '/table/basic',
meta: {
icon: 'ant-design:table-outlined',
title: 'Table',
},
children: [
{
path: 'basic',
name: 'TableBasicDemo',
component: () => import('/@/views/demo/table/Basic.vue'),
meta: {
title: '基础表格',
},
},
],
};
export default test;
path中的路径为路由路径即使自身路径,redirect是重新定向路径就是要跳转的页面的路径
项目菜单配置存放于/@/router/menus (opens new window)下
在menus下新建project,把menus下demo的comp.ts内容复制过来留下table部分进行修改
// comp.ts
menu: {
name: t('routes.demo.comp.comp'),
path: '/comp',
tag: {
dot: true,
},
此处path存放路由路径,本人理解为,因为本身comp.ts在modules下,所以path即为本身路
总结:menu新增左侧菜单栏,routes定义导航页面