《VUE权限管理 -阳光下的小幸福》学习笔记

相关视频请到B站自行搜索,免费教程实属不易.相关文档参考 应属同一资源  gitee 代码 

更正与批注,最后有一处报错

src\pages\login\index.vue

async login() {
    // 网络请求
    let data = await login(this.account);
    let token = data.token;
    // 本地  vuex
    this.$store.commit('LOGIN_IN',token);
    //this.$router.replace("/") // vue-router 3.1 会报错,调整为下面代码
    this.$router.push({ path:"/"},()=>{})
}

 【VueRouter核心思想】: VueRouter引擎使用请求的URL数据与VueRouter中的路由表进行相关处理,换个角度说,浏览器中URL值会被作为VueRouter引擎输入值,根据URL与路由的匹配规则,决定使用哪条路由处理相关的URL, 并且那条由路记录对象中设置了使用哪个vue页面组件.

按如下目录结构设计VueRouter所对应的路由表结构

首页 /home
订单管理
    订单列表 /order/list
    生成管理
        生成列表 /order/product/list
        审核管理 /order/product/review
    退货管理 /order/returnGoods
产品管理
    产品列表  /goods/list
    产品分类  /goods/classify

要求当访问根路径(path:"")重定向(redirect)到路径home, 根路径(path:"")对应布局页面组件(component:Layout)

路由第一部分  /src/router/index.js 

export const DynamicRoutes = [
    {
        path:"",
        component:Layout,//src\pages\layout\index.vue 它又包含左侧导航导航菜单sidebarNave; 右边主内容区 mainContent
        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
    }
]

 路由第二部分  src\router\dynamic-router.js 

const dynamicRoutes = [
    {
        path: '/order',
        component: Order,
        name: 'order-manage',
        meta: {
            name: '订单管理',
            icon: 'icon-email'
        },
        children: [
            {
                path: 'list',
                name: 'order-list',
                component: OrderList,
                meta: {
                    name: '订单列表',
                    icon: 'icon-quit'
                }
            },
            {
                path: 'product',
                name: 'product-manage',
                component: ProductManage,
                meta: {
                    name: '生产管理',
                    icon: 'icon-service'
                },
                children: [
                    {
                        path: 'list',
                        name: 'product-list',
                        component: ProductionList,
                        meta: {
                            name: '生产列表',
                            icon: 'icon-nav'
                        }
                    },
                    {
                        path: 'review',
                        name: 'review-manage',
                        component: ReviewManage,
                        meta: {
                            name: '审核管理',
                            icon: 'icon-finance-manage'
                        }
                    }
                ]
            },
            {
                path: 'returnGoods',
                name: 'return-goods',
                component: ReturnGoods,
                meta: {
                    name: '退货管理',
                    icon: 'icon-product-manage'
                }
            }
        ]
    },
    {
        path: '/goods',
        component: Goods,
        name: 'goods',
        meta: {
            name: '产品管理',
            icon: 'icon-order-manage'
        },
        children: [
            {
                path: 'list',
                name: 'goods-list',
                component: GoodsList,
                meta: {
                    name: '产品列表',
                    icon: 'icon-home'
                }
            },
            {
                path: 'classify',
                name: 'goods-classify',
                component: GoodsClassify,
                meta: {
                    name: '产品分类',
                    icon: 'icon-product-manage'
                }
            }
        ]
    }
]