添加一个新的导航页

最近在使用 https://github.com/hackycy/sf-vue-admin 来开发一个管理系统, 这个项目前端使用的是element ui + vue 后端使用的是 nestjs . 采用 js 一站式开发.

我们如果要添加导航页的话首先就要去修改 数据库

一、添置图标

将图标 item1svg 放到 icons/svg目录下, 如果发现图标不能变色, 请看这篇博文 svg颜色无法改变

二、增加路由记录

这一步如果没有做的话菜单项也是不会显示的

原理可以看 router目录下的 index.js 文件夹下, 其中有一个 constantRouterComponents 变量, 这个变量记录了所有的路由的路由的组件, 如果没有添加记录那么菜单项就不会添加显示.

在 router/modules 添加文件 item1.js

/**
 * test module
 */
export default {
  'test/item1': () => import('@/views/test')
}

三、添加视图组件

在 views 目录下 添加 test.vue组件

<template>
  <h2>
    test
  </h2>
</template>

<script>
export default {
  name: 'Test'
}
</script>

<style scoped>

</style>

四、修改菜单项

用管理员登陆前端->系统管理->权限管理->菜单列表

都是可视化配置非常简单

五、完成了, 刷新页面看看效果吧!