vue项目-外卖管理系统

一、项目介绍

本项目是一个外卖的后端管理系统，可以对外卖的商品，商家等等进行一些操作，包括后端管理系统本身也用到了权限路由，对不同权限的账号设置了一些限制，用到了vue3和element-plus组件库协同开发。

二、路由配置

路由分为
1.登陆页面(一级路由)
2.页面主件 渲染tab栏切换(一级路由)
3.商品管理、店铺管理、账号管理、销售统计 （都是二级路由）

2.1 安装依赖

npm install vue-router@4（@4专门为vue3项目设计的）

2.2 创建路由配置文件

src/router/index.js

在index.js文件里面将路由绑定的组件引入进来

import { createRouter, createWebHistory } from 'vue-router';
import  LoginView from '../components/LoginView.vue'
import  HomeView from '../views/HomeView.vue'
import OrderView from '../views/OrderView.vue'
import ProductList from '../views/ProductList.vue'
import ProductAdd from '../views/ProductAdd.vue'
import ProductClassification from '../views/ProductClassification.vue'
import ShopView from '../views/ShopView.vue'
import LayoutView from '../views/LayoutView.vue'
import AccAdd from '../views/AccAdd.vue'
import AccList from '../views/AccList.vue'
import AccEdit from '../views/AccEdit.vue'
import AccHome from '../views/AccHome.vue'
import OrderStatistics from '../views/OrderStatistics.vue'
import ProductStatistics from '../views/ProductStatistics.vue'

2.3 配置组件路由以及权限控制

这是基本的路由配置
path：路由路径
component：路由渲染的组件
meta：一般用来给路由添加一些数据 比如title 或者我们现在要用到了roles(哪些身份可以访问)

const routes = [
  {
    path: '/',//路由路径
    component: LayoutView,//渲染的组件
    redirect: '/Login',
    meta:{title:'主页'},
    children: [
      {
        path: '/index',
        component: HomeView,
        meta:{title:'首页' ,roles:['super','normal']}
      },
      {
        path:'/order',
        component:OrderView,
        meta:{title:'订单' ,roles:['super','normal']}
      },
      {
        path:'/productList',
        component:ProductList,
        meta:{title:'商品列表' ,roles:['super','normal']}
      },
      {
         path:'/productAdd',
         component:ProductAdd,
         meta:{title:'商品添加' ,roles:['super','normal']}
      },
      {
        path:'/productClassification',
        component:ProductClassification,
        meta:{title:'商品分类' ,roles:['super','normal']}
      },
      {
        path:'/shopView',
        component:ShopView,
        meta:{title:'店铺',roles:['super']}
      },
      {
        path:'/accAdd',
        component:AccAdd,
        meta:{title:'账号添加',roles:['super','normal']}
      },
      {
        path:'/accList',
        compo