vue-vben-admin（vue3.0-typescript）左侧导航新增

项目路由配置存放于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定义导航页面