VUE权限管理项目(一)搭建VUE

 搭建项目结构

在src同级创建public目录

在src下一级创建pages和store

在pages创建errorPage、finance-manage、goods-manage、home、layout、login、order-manage七个目录

pages目录结构如下:

404.vue

　　403.vue

finance-manage下新增3个目录(component、product-manage、return-goods)

component下index.vue

　　product-manage下index.vue

return-goods

　　finance-manage下的index.vue

goods-manage新增两个目录goods-classify和goods-list

goods-classify下index.vue

 goods-list下index.vue

goods-manage

home

layout下index.vue和component

layout下index.vue

　　layout下component下sidebar-nav.vue

layout下component中新建main-content目录包含content.vue、index.vue、top-aside.vue三个vue

content.vue

index.vue

top.aside.vue

login目录下新建index.vue

　　order-manage下新建order-list、product-manage、return-good三个目录

order-list下新建index.vue

product-manage新建production-list、review-manage

production-list下index.vue

review-manage下index.vue

order-manage下index.vue

　　return-goods下新建index.vue

 安装element-ui

使用npm i element-ui -S进行安装element-ui

安装完毕在App.Vue整加一个样式

在router下index.js进行使用

import Login from "../pages/login"
import Home from "../pages/home"
import NotFound from "../pages/errorPage/404"
import Forbidden from "../pages/errorPage/403"
import Layout from "../pages/layout"

修改成如下代码:

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

/**
 * 根据用户的权限不同，所能看到的页面和可操作性也不同
 *  admin -> 所有页面都可以看得到
 *  vip -> 属于vip的权限
 *  svip -> 更多额vip的权限
 * 
 * addRouter()
 */
// 准备动态加载的路由
export const DynamicRoutes = [
    {
        path:"",
        component:Layout,
        name:'container',
        redirect:"home",
        meta:{
            requiresAuth:true,
            name:"首页"
        },
        children:[
            {
                path:"home",
                component:Home,
                name:"home",
                meta:{
                    // 匹配规则
                    name:"首页",
                    icon:"icon-name"
                }
            }
        ]
    },
    {
        path:"/403",
        component:Forbidden
    },
    {
        path:"*",
        component:NotFound
    }
]