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定义导航页面

 
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值