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

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

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

srcpagesloginindex.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,//srcpageslayoutindex.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 outerdynamic-router.js

 1 const dynamicRoutes = [
 2     {
 3         path: '/order',
 4         component: Order,
 5         name: 'order-manage',
 6         meta: {
 7             name: '订单管理',
 8             icon: 'icon-email'
 9         },
10         children: [
11             {
12                 path: 'list',
13                 name: 'order-list',
14                 component: OrderList,
15                 meta: {
16                     name: '订单列表',
17                     icon: 'icon-quit'
18                 }
19             },
20             {
21                 path: 'product',
22                 name: 'product-manage',
23                 component: ProductManage,
24                 meta: {
25                     name: '生产管理',
26                     icon: 'icon-service'
27                 },
28                 children: [
29                     {
30                         path: 'list',
31                         name: 'product-list',
32                         component: ProductionList,
33                         meta: {
34                             name: '生产列表',
35                             icon: 'icon-nav'
36                         }
37                     },
38                     {
39                         path: 'review',
40                         name: 'review-manage',
41                         component: ReviewManage,
42                         meta: {
43                             name: '审核管理',
44                             icon: 'icon-finance-manage'
45                         }
46                     }
47                 ]
48             },
49             {
50                 path: 'returnGoods',
51                 name: 'return-goods',
52                 component: ReturnGoods,
53                 meta: {
54                     name: '退货管理',
55                     icon: 'icon-product-manage'
56                 }
57             }
58         ]
59     },
60     {
61         path: '/goods',
62         component: Goods,
63         name: 'goods',
64         meta: {
65             name: '产品管理',
66             icon: 'icon-order-manage'
67         },
68         children: [
69             {
70                 path: 'list',
71                 name: 'goods-list',
72                 component: GoodsList,
73                 meta: {
74                     name: '产品列表',
75                     icon: 'icon-home'
76                 }
77             },
78             {
79                 path: 'classify',
80                 name: 'goods-classify',
81                 component: GoodsClassify,
82                 meta: {
83                     name: '产品分类',
84                     icon: 'icon-product-manage'
85                 }
86             }
87         ]
88     }
89 ]